@import "https://fonts.googleapis.com/css?family=VT323";body{background:#1b2838;width:100vw;height:100vh;margin:0;font-family:VT323,Courier New,monospace;font-size:2.4rem;overflow:hidden}.screen:before{content:"";z-index:-1;background:linear-gradient(#85908c 0%,#323431 100%);width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.scanlines .overlay{z-index:1;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.scanlines .overlay:after{content:"";background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/crt.png);background-repeat:no-repeat;background-size:100% 100%;width:100%;height:100%;position:absolute;top:0;left:0}.scanlines .overlay:before{content:" ";z-index:2;pointer-events:none;background:linear-gradient(#12101000 50%,#00000040 50%) 0 0/100% 2px,linear-gradient(90deg,#ff00000f,#00ff0005,#0000ff0f) 0 0/3px 100%;position:absolute;inset:0}.picture{z-index:-1;background:linear-gradient(#85908c 0%,#323431 100%);width:100vw;height:100vh;overflow:hidden;transform:scale(0)}@media (width>=10rem){.menu{opacity:0;box-sizing:border-box;text-transform:uppercase;z-index:10;text-shadow:1px 1px #000,-1px -1px #000,1px -1px #000,-1px 1px #000;filter:blur(1px);color:#fff;background-color:#0069ff;width:90%;height:auto;animation:.1s infinite jerkup}}@media (width>=40rem){.menu{opacity:0;box-sizing:border-box;text-transform:uppercase;z-index:10;text-shadow:1px 1px #000,-1px -1px #000,1px -1px #000,-1px 1px #000;filter:blur(1px);color:#fff;background-color:#0069ff;width:auto;height:auto;animation:.1s infinite jerkup}}.menu header{color:#e7e05c;margin-bottom:10px;padding:5px 15px;animation:5s 2s infinite glitch}.menu ul{margin:0;padding:0;animation:5s 2s infinite glitch}.menu ul li{box-sizing:border-box;padding:5px 15px;list-style:none}.menu ul li.active{background-color:#1af2ff}.menu ul li a{color:#fff;text-decoration:none}.menu footer{background-color:#2afd72;margin-top:10px;padding:5px 15px;animation:5s 2s infinite glitch}.menu footer:after{clear:both;content:" ";display:table}.menu footer .key{float:left;width:50%}.menu footer .key span{background-color:#0069ff;border:6px solid #e7e05c;border-radius:6px;height:34px;padding-left:6px;line-height:36px;display:inline-block}.menu footer .key:last-child{text-align:right}.on .picture{animation:3s linear forwards on}.off .picture{animation:.75s cubic-bezier(.23,1,.32,1) forwards off}.text{color:#0f0;content:"AV-1";opacity:0;filter:blur(.5px);text-shadow:0 0 3px #0f0;width:200px;font-size:4rem;position:absolute;top:5%;left:5%}li:hover{background-color:#2afd72}.on .text,.on .menu{opacity:1;transition:opacity 10ms 2s}@keyframes on{0%{filter:brightness(4);opacity:1;transform:scaleY(.8)translate(0)}3.5%{transform:scaleY(.8)translateY(100%)}3.6%{opacity:1;transform:scaleY(.8)translateY(-100%)}9%{filter:brightness(4);opacity:0;transform:scale(1.3,.6)translateY(100%)}11%{filter:contrast(0)brightness(0);opacity:0;transform:scale(1)translate(0)}to{filter:contrast()brightness(1.2)saturate(1.3);opacity:1;transform:scale(1)translate(0)}}@keyframes off{0%{filter:brightness();transform:scale(1)}40%{filter:brightness(100);transform:scaleY(.005)}70%{transform:scaleY(.005)}90%{transform:scale(.005)}to{transform:scale(0)}}.text span{filter:blur(1px);position:absolute}.text span:first-child{color:red;filter:blur(2px);margin-left:-2px}.text span:nth-child(2){color:#0f0;filter:blur(2px);margin-left:2px}.text span:nth-child(3){color:#00f;position:20px 0;filter:blur(1px)}.text span:nth-child(4){color:#fff;filter:blur(1px);text-shadow:0 0 50px #fff6}.text span:nth-child(5){color:#ffffff1a;filter:blur(15px)}.text span{animation:30ms infinite blur,50ms infinite jerk}@keyframes blur{0%{filter:blur(1px);opacity:.8}50%{filter:blur(1px);opacity:1}to{filter:blur(1px);opacity:.8}}@keyframes jerk{50%{transform:translate(1px)}51%{transform:translate(0)}}@keyframes jerkup{0%{transform:translateY(1px)}to{transform:translateY(0)}}.text span:nth-child(3){animation:1s infinite glitch1}@keyframes glitch1{0%{transform:translate(0)}30%{transform:translate(0)}31%{transform:translate(10px)}32%{transform:translate(0)}98%{transform:translate(0)}to{transform:translate(10px)}}.text span:nth-child(2){animation:1s infinite glitch2}@keyframes glitch2{0%{transform:translate(0)}30%{transform:translate(0)}31%{transform:translate(-10px)}32%{transform:translate(0)}98%{transform:translate(0)}to{transform:translate(-10px)}}.overlay .text{animation:5s 2s infinite glitch}@keyframes glitch{40%{opacity:1;transform:skew(0deg)}41%{opacity:.8;transform:skew(80deg)}42%{opacity:.8;transform:skew(-50deg)}43%{opacity:1;transform:skew(0deg)}}