style.min.css

*{margin:0;padding:0}html{height:100%;width:100%}body{background-color:#000;margin:0;padding:0;overflow:hidden;height:100%;width:100%;position:relative;font-family:Overpass,'Segoe UI',monospace,sans-serif}button{cursor:pointer;outline:0}#start-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:50%;width:50%;z-index:2}#tap-to-start{cursor:default;pointer-events:none;position:absolute;top:50%;text-align:center;z-index:3;color:#fff;width:100%}.menu{background-color:#313a6d;z-index:3;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none}.menu-button{display:block;margin-left:10%;margin-right:10%;margin-bottom:12%;width:80%;height:12%;color:#0f0644;background-color:#f9f4e3;border-style:none;box-shadow:5px 5px #0f0644}.menu-button:hover{background-color:#bddb0f}.menu-button:active{background-color:#bddb0f;box-shadow:none;transform:translate(3px,3px)}.mini-button{width:20%;height:100%;display:inline-block;color:#232a4e;background-color:#f9f4e3;border-style:none;box-shadow:4px 4px #232a4e;background-repeat:no-repeat;background-size:70% 70%;background-position:center}.mini-button svg{width:100%;height:100%;fill:#0f0644}.mini-button:hover{background-color:#bddb0f}.mini-button:active{background-color:#bddb0f;box-shadow:none;transform:translate(3px,3px)}.mini-button-container{margin-left:10%;margin-right:10%;height:12%;text-align:justify}.mini-button-container:after{content:"";display:inline-block;width:100%}#dimmer{position:absolute;left:0;top:0;height:100%;width:100%;z-index:1;background-color:#000;pointer-events:none;display:none}#confirmation-menu{width:65%;height:40%}#confirmation-label{width:100%;height:20%;color:#bddb0f;position:relative;display:block;margin-top:10%;margin-bottom:10%}#confirmation-label>h1{text-align:center}#confirmation-back,#confirmation-yes{height:18%}#not-implemented-menu{width:65%}#not-implemented-label{width:100%;color:#bddb0f;position:relative;display:block;text-align:center;padding-top:5%;margin-bottom:15%}#not-implemented-label>h1{margin-bottom:5%}#not-implemented-label>p{letter-spacing:0}#not-implemented-back{height:3em}#pause-menu{height:50%;width:65%}#pause-menu-label{width:100%;height:20%;color:#bddb0f;position:relative;display:block}#pause-menu-label>h1{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#music-mini svg{width:70%}#volume-mini svg{width:70%}#help-menu{height:45%;width:65%}#help-menu .menu-button{height:14%}#help-menu-label{width:100%;height:30%;color:#db075c;position:relative;display:block}#help-menu-label>h1{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#top-bar{background-color:#313a6d;margin:auto;margin-top:5%;height:6%;width:90%;position:relative;z-index:1;visibility:hidden}#bar-label{color:#fff;font-style:italic;position:absolute;right:5%;top:50%;height:100%;line-height:25%}.bar-button{position:absolute;z-index:2;top:50%;transform:translateY(-50%)}.bar-button>button:active{transform:translate(3px,3px)}.bar-button>button{height:95%;width:95%;position:absolute;top:0;left:0;border-style:none;background-repeat:no-repeat;background-size:100% 100%}.bar-button>button>svg{fill:#fff;width:100%;height:100%}#lives{position:absolute;top:130%;right:0;height:50%;width:30%}#lives svg{height:100%;width:30%;float:right;fill:red}#lives:after{content:"";display:inline-block;width:100%}#pause-box{left:0}#pause{background-color:#bddb0f;box-shadow:3px 3px #718309}#pause:active{box-shadow:none}#help-box{transform:translate(120%,-50%)}#help{background-color:#db075c;box-shadow:3px 3px #8d053c}#help:active{box-shadow:none}#game-canvas{background-color:#fff;position:absolute;top:0;left:0}@media (prefers-reduced-motion){.center-popout{animation:unset;-webkit-animation:unset}.center-popin{animation:unset;-webkit-animation:unset}}@media screen and (min-height:601px){*{font-size:16px;letter-spacing:3px}h1{font-size:30px;letter-spacing:4px}}@media screen and (max-height:600px){*{font-size:14px;letter-spacing:2px}h1{font-size:26px;letter-spacing:3px}}@media screen and (max-height:400px){*{font-size:12px;letter-spacing:1px}h1{font-size:22px;letter-spacing:2px}}@media screen and (max-height:300px){*{font-size:8px;letter-spacing:0}h1{font-size:10px;letter-spacing:2px}}@media screen and (max-height:200px){*{font-size:6px}h1{font-size:8px;letter-spacing:1px}}.partial-fade-in{opacity:.75;animation:fadeInOpacity .12s ease-in forwards;-webkit-animation:fadeInOpacity .12s ease-in forwards}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:.75}}.partial-fade-out{opacity:0;animation:fadeOutOpacity .12s ease-in forwards;-webkit-animation:fadeOutOpacity .12s ease-in forwards}@keyframes fadeOutOpacity{0%{opacity:.75}100%{opacity:0}}.center-popout{animation:center-popout .25s ease forwards;-webkit-animation:center-popout .25s ease forwards}@keyframes center-popout{from{transform:translate(-50%,-50%) scale(0)}70%{transform:translate(-50%,-50%) scale(1.2)}to{transform:translate(-50%,-50%) scale(1)}}@-webkit-keyframes center-popout{from{transform:translate(-50%,-50%) scale(0)}70%{transform:translate(-50%,-50%) scale(1.2)}to{transform:translate(-50%,-50%) scale(1)}}.center-popin{animation:center-popin .25s ease forwards;-webkit-animation:center-popin .25s ease forwards}@keyframes center-popin{from{transform:translate(-50%,-50%) scale(1)}30%{transform:translate(-50%,-50%) scale(1.2)}to{transform:translate(-50%,-50%) scale(0)}}@-webkit-keyframes center-popin{from{transform:translate(-50%,-50%) scale(1)}30%{transform:translate(-50%,-50%) scale(1.2)}to{transform:translate(-50%,-50%) scale(0)}}