body {
	background:#fff;
    color:rgba(0, 0, 0, 0.75);
    font-family:proxima-nova, 'Proxima Nova', 'Helvetica Neue', sans-serif;
	font-size:16px;
}

* {
    padding:0;
    margin:0;
}

a {
    color:rgba(0, 0, 0, 0.75);
}

a:hover {
    text-decoration:underline;
}

/* ******************************* HEADER ******************************* */

#header {
    font-size:14px;
    position:fixed;
    width:100%;
    top:0px;
    left:0px;
}

#header h1 {
	font-family:proxima-nova, 'Proxima Nova', 'Helvetica Neue', sans-serif;
    font-size:14px;
    font-weight:normal;
    float:left;
    height:110px;
    width:110px;

    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    background-image:url(logo-swirl-bg.svg);
}

#header h1 a {
    float:left;
    height:110px;
    width:110px;
    overflow:hidden;
    text-indent:1000px;

    background-repeat:no-repeat;
    background-position:-10px 10px;
    background-size:contain;
    background-image:url(logo.svg);
}

#header h1 a:hover {
    text-decoration:none;
}

.mobile #header {
    top:25px;
    left:10px;
}

.mobile #header h1 a {
    height:70px;
    width:80px;
    background-position:-10px 0px;
}

.mobile #header h1 {
    height:70px;
    width:80px;
}


/* ******************************* HOMEPAGE ******************************* */

#home {
    background-repeat:no-repeat;
    background-position:-180px -100px;
    background-size:830px 830px;
    background-image:url(grey-blob.svg);
}

#home h2 {
    font-size:18px;
    margin-bottom:15px;
}

#home #wrapper {
    margin:0px auto;
    max-width:880px;
    overflow:hidden;
}

#content-wrapper {
    display: flex;
    align-content: stretch;
    align-items: start;
    flex-wrap: wrap;
    padding:100px 20px;
}

.mobile #content-wrapper {
    padding-top:140px;
}

#content-wrapper #content,
#content-wrapper #latest,
#content-wrapper #nav {
    flex: 2 1 auto;
}

#home #content-wrapper #content,
#home #content-wrapper #latest {
    max-width:500px;
    padding-right:50px;
}

#home #content-wrapper #latest {
    margin-bottom:50px;
}

#home.mobile #content-wrapper #content,
#home.mobile #content-wrapper #latest {
    padding-right:0;
}

#home #content-wrapper #nav {
    max-width:280px;
}

#home #drawings {
    position:relative;
    height:300px;
}

#home #project,
#home #imokyou-logo,
#home #imokyou-polyline,
#home #imokyou-beans {
    position:absolute;

    height:200px;
    width:200px;
    text-indent:1000px;
    overflow:hidden;
    display:block;

    background-repeat:no-repeat;
    background-position:0 0;
    background-size:cover;
}

#home #project {
    top:50px;
    left:280px;
    height:250px;
    width:250px;
    background-image:url(imokyou-face.svg);
}

#home #imokyou-logo {
    top:10px;
    left:-20px;
    background-image:url(imokyou-logo.svg);
}

#home.mobile #imokyou-logo {
    left:-50px;
}

#home #imokyou-polyline {
    top:-70px;
    left:40px;
    height:320px;
    width:400px;
    background-image:url(imokyou-polyline.svg);
}

#home.mobile #imokyou-polyline {
    left:0;
}

#home #imokyou-beans {
    top:-100px;
    left:160px;
    height:300px;
    width:300px;
    background-image:url(imokyou-beans.svg);
}

/* ******************************* NAV ******************************* */

#nav {
    margin:0;
    max-width:240px;
    list-style-type:none;
}

#nav > li {
    padding:0 0 30px;
}

#nav h2 {
}

#nav h3 {
    font-size:16px;
    font-weight:normal;
}

#nav ul li {
    font-size:16px;
    margin:10px 0 0 30px;
}

.mobile #nav ul li {
    font-size:16px;
}

/* ******************************* ESSAY PAGE ******************************* */

#content {
    margin:0 auto;
    max-width:600px;
    padding:0 20px;
}

#content h2 {
    font-size:26px;
    padding:100px 0 10px;
}

#content h3 {
    font-size:18px;
    padding:30px 0;
}

#content img {
    float:left;
    margin-bottom:20px;
    margin-right:20px;
    width:100%;
}

#content p {
    font-size:18px;
    line-height:26px;
    margin:0 0 30px 0;
}

#content p.intro {
    margin:0;
    padding:0 0 50px 0;
    font-style:italic;
}

#content p.published {
    color:#aaa;
    font-size:16px;
    font-style:italic;
    margin-bottom:120px;
}

#content p.published::before {
    content: 'Published ';
}

.mobile #content h2 {
    font-size:22px;
    padding-top:140px;
}

.mobile #content p.intro {
    font-size:16px;
}



/* ******************************* FOOTER ******************************* */

#footer_wrapper {
	clear:both;
	color:#aaa;
	font-family:proxima-nova, 'Proxima Nova', 'Helvetica Neue', sans-serif;
	font-size:12px;
	padding:60px 20px;
	text-align:center;
}

#footer a {
    color:#aaa;
}

#footer #versions {
    padding-top:5px;
}

#essay #footer #versions {
    display:none;
}