body,html{font-family:Helvetica-Neue,Helvetica,Roboto,Verdana,Arial,sans-serif;height:100%;margin:0}#canvas{bottom:0;display:block;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:-1}#content{font-size:48px;margin:1em}ul{float:left;font-size:36px;list-style:none;color:#fff;padding:2em}ul>li{margin-bottom:.6em}ul>li>span{background:#000;padding:.1em .7em .2em .4em;transition:background .2s,color .2s}ul>li>span>a{color:inherit}ul>li>span:hover{background:#fff;color:#000;padding:.2em .7em .3em .4em}ul>li>span:hover>a{color:#9700ed}.footer{bottom:1em;font-size:16px;padding:0;position:absolute;right:1em;transform-origin:top right;transform:rotate(90deg)}#loading{align-items:center;background:#000;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:100;transition:opacity .25s}#loading>span{animation-duration:3s;animation-iteration-count:infinite;animation-name:spin;animation-timing-function:linear;border-color:#000 #fff;border-radius:50%;border-style:solid;border-width:5px;display:block;height:3em;width:3em}@media screen and (max-width:600px){ul{bottom:0;font-size:30px;padding:1em;position:absolute}.footer{font-size:12px}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@media screen and (max-width:330px){ul{font-size:24px}.footer{font-size:10px}}