html{overflow:hidden}body{position:relative;width:100%;font-family:system,-apple-system,\.SFNSText-Regular,San Francisco,Roboto,Segoe UI,Helvetica Neue,Lucida Grande,sans-serif;background:#000041;background:-webkit-linear-gradient(left,#000041 0,#f04 100%);background:linear-gradient(to right,#000041 0,#f04 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000041',endColorstr='#ff0044',GradientType=1)}body,html{height:100%}body.show-blog #blog,body.show-blog #container{-webkit-transform:translateX(-100vw) translateY(-100vh);-ms-transform:translateX(-100vw) translateY(-100vh);transform:translateX(-100vw) translateY(-100vh)}#blog,#container{margin-top:2em;height:80%}#container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-transition:-webkit-transform .4s linear .1s;transition:transform .4s linear .1s}#blog{overflow:scroll;-webkit-transition:-webkit-transform .5s;transition:transform .5s;position:absolute;top:100vh;left:100vw;width:50%;margin-left:10%;padding:1em;background:hsla(0,0%,100%,.6);color:#444;-webkit-columns:18em;-moz-columns:18em;columns:18em}#blog p{line-height:1.4}#blog hr{width:100%;border-color:#b3e5fc}h1{text-align:center;font-size:6em;-webkit-animation:b 20s infinite;animation:b 20s infinite}a{color:#111;text-decoration:none;border-bottom:2px solid #b3e5fc;box-shadow:inset 0 -4px 0 #b3e5fc;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}a:hover{background:#b3e5fc}nav{margin:auto;font-size:3em}nav a{color:#fff;font-weight:700;text-decoration:none;margin:1ex}nav a:hover{opacity:1}canvas{position:fixed;top:0;left:0;z-index:-10;width:100%;height:100%;-webkit-animation:a 3s;animation:a 3s}@-webkit-keyframes a{0%{opacity:0}to{opacity:1}}@keyframes a{0%{opacity:0}to{opacity:1}}@media only screen and (max-width:1210px){pre{width:100%;font-size:1.2em;padding-left:0;padding-right:0}}@media only screen and (max-width:1000px){pre{font-size:1.1em}}@media only screen and (max-width:800px){pre{font-size:.6em}nav a,pre{float:left;clear:both;text-align:left}}@-webkit-keyframes b{0%{color:red}14%{color:orange}28%{color:#ff0}42%{color:green}56%{color:blue}70%{color:indigo}84%{color:violet}}@keyframes b{0%,to{color:red}14%{color:orange}28%{color:#ff0}42%{color:green}56%{color:blue}70%{color:indigo}84%{color:violet}to{color:red}}