@font-face { font-family: e; src: url(e.woff) }
@font-face { font-family: s; src: url(s.woff) }
* { margin: 0; padding: 0; box-sizing: border-box }
html { background: rgb(253, 254, 251) }
body, h1, h2 { font: 17px/27px s; color: rgba(0,0,0,0.8) }
header { position: fixed; background-color: rgba(73,61,61,0.8); color: rgb(116,211,164); top: 20px; left: 20px; border-radius: 4px; padding: 13px 20px; transition: 0.4s linear; white-space: pre; -moz-appearance: none; -webkit-appearance: none; z-index: 1 }
header.hide { opacity: 0 }
div { width: 950px; margin: 0 auto; position: relative }
main, aside { outline: none } /*; display: flex; flex-flow: column-reverse nowrap } //// BACKWARDS MODE */
aside { position: absolute; left: 720px; top: 0; transform-origin: top left; transform: scale(0.33333); padding: 500px 0 }
/*nav { position: absolute; left: 720px; top: 0; height: 100vh; height: 33vh; transform-origin: top left; transform: scale(3); width: 210px; overflow: scroll }
section { height: 500vh }
*/
main { padding-top: 150px; width: 630px }
article { margin-bottom: 100px; margin-left: 20px; margin-right: 20px }
article > * { width: 630px; max-width: calc(100vw - 100px) }

mark { display: inline-block; background: rgba(219, 228, 225, 0.5); color: rgba(0,0,0,0.5); padding: 4px 8px; border-radius: 4px; margin-bottom: 40px; margin-left: -5px }
p, h1, h2 { margin-left: 20px }
p { margin-bottom: 20px }
h1 { text-transform: uppercase; letter-spacing: 2px; margin-bottom: 40px }
blockquote, h3 { font: 22px/32px e }
blockquote { margin-left: 60px; margin-bottom: 20px }
h2, h3 { display: inline-block; margin: 0 0 20px 60px; font-weight: normal; border-bottom: 1px solid black; width: auto }
h2 { margin-left: 20px }
q { display: block; color: rgba(157, 214, 99, 0.8); margin-left: 60px }
s { display: block; text-decoration: none; color: rgba(0,0,0,0.5); margin-left: 60px; margin-bottom: 20px }
figure { margin: 0 }
figure img, figure video, figure iframe { max-width: calc(100vw - 100px); width: 630px; height: auto; }
figure iframe { height: 400px }
iframe { border: 0 }
figcaption { line-height: 22px; max-width: 400px; margin: 10px 0px 40px 2px }
a, a:visited, a:active, a:link { color: rgb(155, 203, 205); color: rgba(155, 203, 205, 0.8) }

@media screen and (max-width: 920px) { 
  div { width: auto }
  article { max-width: 630px }
  aside { display: none }
}