html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0;font:1.05em/1.6 'Lora',serif;color:#fcfcfc;background-color:#171717;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

a{position:relative;color:inherit;text-decoration:none;padding-bottom:2px;border-bottom-style:solid;border-bottom-width:3.1px;width:fit-content;}
a:focus,a:hover{color:#575757}
::-moz-focus-inner{padding:0;border:0}::selection{text-shadow:none;background-color:#e4f1ee}::-moz-selection{text-shadow:none;background-color:#e4f1ee}

.layout{padding:5em 10vw;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"title" "bio" "contacts";grid-gap:1em}

.title,.contacts{margin:0;padding:0;color:#ff5926;font:500 0.8em/1 'Istok Web',sans-serif;letter-spacing:.2em;text-transform:uppercase}
h2{font-size:1.1em;padding:0;margin:0;}
.contacts {margin-top:2em;}

@media (min-width:900px){.layout{padding:6em;grid-template-columns:1fr 100px;grid-template-rows:40px 1fr;height:90vh;box-sizing:border-box}}
@media (min-width:900px){.title{grid-area:title}}.bio{max-width:60ch}.bio p:first-child{margin-top:0}.bio p:last-child{margin-bottom:0}
@media (min-width:900px){.bio{grid-area:bio}}.contacts{list-style:none}.contacts li:not(:last-child){margin-bottom:20px}.contacts li:last-child{margin-bottom:1em}
@media (min-width:900px){.contacts{grid-area:contacts;align-self:end;text-align:left}.contacts li:not(:last-child){margin-bottom:10px}.contacts li:last-child{margin-bottom:5px}.contacts li{display: inline;}}
