*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:Nunito,sans-serif;font-optical-sizing:auto;font-style:normal;line-height:1.5;font-weight:400;font-size:4rem}.wrapper{height:100vh;display:flex;flex-direction:column}h1,h2{font-size:5rem;text-align:center;font-weight:400}canvas{display:none}#buttons{-webkit-user-select:none;user-select:none;touch-action:manipulation;display:flex;flex-direction:column;align-items:center;width:calc(100vw - 10px);max-width:calc(100vw - 10px);flex-grow:1;margin:0 auto}button{font-size:calc(.5rem + 10vw);background:#6b9643;text-align:center;color:#fff;border:none;transition:all .08s;width:calc(100% - 10px);max-width:calc(100% - 10px);flex-grow:1;padding:calc(10vh - 30px);margin:1vh 0;box-sizing:border-box}button:hover,button:focus{box-shadow:inset 0 0 10px #c3fc8b;background:#61883c}button:active{box-shadow:0 0 10px 1px #ff790c;transform:translateY(2px) translate(2px)}.record.recording{background:#b46912}label{-webkit-user-select:none;user-select:none;touch-action:manipulation;font-size:3rem;position:absolute;top:2px;right:3px;z-index:5;cursor:pointer;background-color:#000;border-radius:10px}input[type=checkbox]{position:absolute;top:-100px}aside{position:fixed;top:0;left:0;width:100%;height:100%;transform:translate(100%);transition:.3s all ease-out;background-color:#efefef;padding:1rem;color:#392b27;text-align:center}aside p{font-size:3rem;margin:.5rem 0}aside a{display:flex;color:#666}input[type=checkbox]:checked~aside{transform:translate(0)}c color{color:#b46912}