*   {
    text-rendering: optimizeLegibility;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;   
    hyphenate-limit-last: always;
    hyphenate-limit-zone: 8%;
}
html {
    background: black;
}
body {
    color: #eee;
    font-weight: 500;
    font-family: neue-haas-grotesk-display, Helvetica, sans-serif;
    font-size: 1em;
    margin: 0 auto;
    padding: 0em;
    text-transform:none;
}
main {
    width:auto;
    margin:0 auto;
    border:0;
    padding:1em 2em 2em 2em;
}

#contact {
    margin: 3em 0 0 0;
}
aside {
    width: 100vw;
    max-width: calc(100vw - 2em);
    margin:0 auto;
    padding:1em 0 0 0;
    background-color:transparent;
    object-fit: cover;
}
footer {
    margin:0 0 2em 2em;
    text-transform: uppercase;
}
h1 { color: white;
    font-size: 1em;
    line-height: normal;
    font-family: neue-haas-grotesk-display, Helvetica, sans-serif;
    font-weight: 700;
    font-style: normal;
}
h2 {
    font-size: 1em;
    line-height: 0;
    margin: 2em 0 0em 0;
    font-family: neue-haas-grotesk-display, Helvetica, sans-serif;
    font-weight: 700;
    font-style: normal;
}
p   {
    line-height:1.3em;
}
a {
    color: #eee;
    font-family: neue-haas-grotesk-display, Helvetica, sans-serif;
    font-weight: 500;
    text-decoration: none;
    border-bottom:1px solid #666;
}

a:hover {border-bottom:1px solid #ccc}

img {
    border: 0;
    display: inline;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.cover  {
    width:100%;
    height:100%;
    object-fit: cover;
}
@media only screen and (min-width: 800px) {
main {padding:2em 4em 2em 4em;}
footer {margin-left:4em;}
}
@media only screen and (min-width: 900px) {
body {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;}
aside {
    width: 100vw;
    height: calc(100vh - 4em);
    max-height: 100vh;
    margin:0;
    padding:0;
    background-color:transparent;
    object-fit: cover;
}  
main {
    padding:calc(100% / 12 * 1) 4em 4em 4em;
    margin:0;
    text-align: center;
    flex: 1;
   }
footer {
    position:fixed;
    bottom:50%;
    left:-9em;
    background-color: transparent;
    transform: rotate(270deg);
    }
aside {
    padding:2em 2em 0 0;
    margin:0;
    flex: 1;
    }
}
@media only screen and (min-width: 1500px) {
#bio {
    max-width: 80ch;
    margin:0 auto;
  font-size:1.1em;
}
footer {
    position:fixed;
    bottom:-1em;
    left:-2em;
    background-color: transparent;
    transform: initial;
    }
main {
  padding:calc(100% / 12 * 0.66) 4em 4em 4em;
  }
}