@import url(https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@400;800&display=swap);
body,html{height:100%}body{background-color:#000;color:red;display:flex;flex-direction:column;font-family:Gemunu Libre,sans-serif;font-weight:400;justify-items:center;margin:0;padding:0}html{font-size:16px}p{font-size:1.2rem}@media only screen and (max-width:800px){html{font-size:12px}}footer{opacity:0;transition:opacity .2s linear}#app,.tunes,footer{margin-top:30px}.app{left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:height .5s linear}#app{text-align:center}.active .app,.active footer{opacity:1}.wrapper{display:flex;flex:1;flex-direction:column;justify-content:center;margin:0 auto;max-width:800px;padding:20px 0;position:relative;width:90%}#logo{height:auto;opacity:0;transform:scale(.5);transition:all 1s linear;width:100%}.step-1 #logo{opacity:1;transform:scale(1)}.step-1 .app{height:0;overflow:hidden;pointer-events:auto;position:static}.tune{cursor:pointer;font-size:3rem;margin-bottom:10px;position:relative;text-align:center;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tune.playing{background:#fff}.tune-label{display:inline-block;font-weight:800;pointer-events:none;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.playing .tune-label{color:#000}.tune-shadow{background-color:red;bottom:0;left:0;pointer-events:none;position:absolute;top:0}footer{text-align:center}footer a{color:#c00}.button{background:transparent;border-color:transparent transparent transparent red;border-style:solid;border-width:1rem 0 1rem 2rem;box-sizing:border-box;cursor:pointer;height:2rem;left:1rem;position:absolute;top:.7rem;transition:all .1s ease;width:0;z-index:1}.button.pause{border-width:0;border-left:2rem #000;border-style:double}