body,canvas,html{margin:0;padding:0}body,html{overflow:hidden;width:100%;height:100%}body{width:100wh;height:100vh;color:#fff;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;-webkit-animation:Gradient 15s ease infinite;-moz-animation:Gradient 15s ease infinite;animation:Gradient 15s ease infinite}.p1,.p2{animation:dash 2s ease infinite}@-webkit-keyframes Gradient{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@-moz-keyframes Gradient{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes Gradient{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}.path{stroke-dasharray:1000;stroke-dashoffset:1000}.p2{animation-delay:1.1s}.p3,.p4{animation:dash 2s ease infinite}.p3{animation-delay:1.2s}.p4{animation-delay:1.3s}.p5{animation:dash 2s ease infinite;animation-delay:1.4s}.p6{animation:dash 2.3s ease infinite}#splash,#splash h1,#splash h2{animation-duration:3s}@keyframes dash{from{stroke-dashoffset:200%}to{stroke-dashoffset:0}}canvas{display:block}@media screen and (min-width:0px) and (max-width:660px){.p2,.p3,.p4,.p5{display:none}}@media screen and (min-width:660px){.p2,.p3,.p4,.p5{display:block}}#background-wrap{bottom:0;left:0;padding-top:50px;position:absolute;right:0;top:0;z-index:-1;background:0 0}#controller,#hud,#menu,#story,#win{display:block;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;animation-name:menu_fade_in;animation-duration:1s}#controller,#story,#win{overflow-y:auto;color:#96ffec}#controller ul,#story p,#win p{padding:60px 4px;margin:4px;font-size:1.2em;line-height:3em}#controller ul{font-size:34px;list-style:none}.rotate{-webkit-transform:rotate(-90deg)!important;-moz-transform:rotate(-90deg)!important;-ms-transform:rotate(-90deg)!important;-o-transform:rotate(-90deg)!important;height:auto;width:auto;display:inline-block}#killed,#splash,#talk{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}#killed,#menu h1,#menu h2,#splash,#splash h1,#splash h2,#talk{display:block}@-webkit-keyframes menu_fade_in{from{opacity:0}to{opacity:1}}#menu h1{margin-top:64px;transform:skew(-12deg) rotate(-12deg);grid-area:text;font-family:sans-serif;font-size:20vmin;padding:30px;color:#00BCD4;text-shadow:1vmin 1vmin 0 #01579b94,-1vmin -1vmin 0 #03a9f459}#menu h2{color:#fff6f6;animation:blink-animation 1s steps(3,start) infinite;-webkit-animation:blink-animation 1s steps(3,start) infinite}@keyframes blink-animation{to{visibility:hidden}}@-webkit-keyframes blink-animation{to{visibility:hidden}}#splash{background-image:radial-gradient(circle,#333,#222);animation-name:splash_fade_out}@-webkit-keyframes splash_fade_out{from{opacity:1}to{opacity:0}}#splash h1{color:#fff;font-size:96px;margin-top:220px;animation-name:splash_logo_changing;animation-iteration-count:infinite;animation-direction:alternate}#splash h2{color:#fff00;font-size:16px;margin-top:0;animation-name:splash_presenta_changing;animation-direction:normal}@-webkit-keyframes splash_logo_changing{from{font-size:18px;margin-top:220px}to{font-size:96px;margin-top:296px}}#killed .area,#talk p{background:#00000099;border-radius:6px;margin:50px auto}@-webkit-keyframes splash_presenta_changing{from{color:#fff00;font-size:16px}to{color:#fffff;font-size:56px}}#talk p{width:40%;padding:20px;color:#ff0;font-size:1.3em}.other{color:#1976d2!important}#killed .area{width:60%;padding:10px;color:#fff;font-weight:700}#killed .area img{padding-bottom:20px;transform:rotate(180deg)}#killed .area p{transform:skew(-12deg) rotate(-12deg);grid-area:text;font-family:Arial;font-size:8vmin;padding-top:10px;padding-bottom:20px;color:#1d9099;text-shadow:1vmin 1vmin 0 #01579b}
