@font-face{font-family:Quantico;src:url(assets/fonts/Quantico-Regular.ttf)}*{margin:0;padding:0;box-sizing:border-box}body,html{width:100%;height:100%}body{background:linear-gradient(180deg,#eef2f3,#8e9eab)}#app{padding:20px;position:relative;height:100%}.loader{margin:auto;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:fade-in .5s linear;transition:opacity .5s linear}.loader:before{display:block;content:"";width:100px;height:100px;border-radius:50%;border:5px solid;border-color:#000 #000 transparent;animation:spin 1.5s linear infinite}.loader:after{display:block;content:"Loading assets..";font-family:Quantico,sans-serif;font-size:22px;margin-top:10px;font-weight:500}.loaded #piano{opacity:1}#piano,.loaded .loader{opacity:0}#piano{border-color:#101010;border-style:solid;border-width:0 50px;border-radius:2px;box-shadow:5px 5px 7px 3px rgba(0,0,0,.5);background:transparent;transition:opacity .25s linear .6s;cursor:default}#piano:after{display:block;content:"";height:40px;background:#2e2f2f;box-shadow:inset 5px 0 5px 3px rgba(0,0,0,.4)}.dashboard{height:150px;background-color:#2e2f2f;display:flex;justify-content:space-between;align-items:center}.dashboard .buttons{flex:1;display:flex;justify-content:center;font-size:15px;font-family:Quantico,sans-serif}.dashboard .buttons .triangle .text{color:#e2e2e2;text-align:center;text-transform:uppercase;font-weight:600;margin:4px 0;letter-spacing:1px}.dashboard .buttons .triangle .up{height:0;width:0;border-color:transparent transparent #4e5253;border-style:solid;border-width:0 40px 35px;border-radius:5px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.75));cursor:pointer}.dashboard .buttons .triangle .up:before{content:"+";font-weight:600;position:relative;color:rgba(0,0,0,.6);font-size:25px;top:1px;right:7px}.dashboard .buttons .triangle .up:active{filter:none}.dashboard .buttons .triangle .up:active:before{color:hsla(0,0%,100%,.7)}.dashboard .buttons .triangle .down{height:0;width:0;border-color:#4e5253 transparent transparent;border-style:solid;border-width:35px 40px 0;border-radius:5px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.75));cursor:pointer}.dashboard .buttons .triangle .down:before{content:"-";font-weight:600;position:relative;color:rgba(0,0,0,.6);bottom:50px;right:7px;font-size:35px}.dashboard .buttons .triangle .down:active{filter:none}.dashboard .buttons .triangle .down:active:before{color:hsla(0,0%,100%,.7)}.dashboard #screen{display:flex;justify-content:center;align-items:center;font-size:55px;text-transform:uppercase;font-weight:500;font-family:Quantico,sans-serif;width:25%;height:95px;background:linear-gradient(90deg,#ffc837,#ff8008);border-radius:5px;box-shadow:0 0 3px 2px rgba(0,0,0,.3);border:8px solid #101010}#keys{display:flex;height:280px;background:#2e2f2f;box-shadow:0 -8px 5px 0 rgba(0,0,0,.75)}#keys .key{flex-grow:1;position:relative;cursor:pointer}#keys .key .white{background:#fff;border-radius:0 0 8px 8px;border:solid #ccc;border-width:0 0 2px;box-shadow:0 7px 5px 0 rgba(0,0,0,.75),inset 0 5px 6px 0 rgba(0,0,0,.75);height:100%;transition:opacity .5s linear;opacity:0}#keys .key .white.active{height:98%;box-shadow:inset 0 4px 7px 2px rgba(0,0,0,.75)}#keys .key .black{background:linear-gradient(-20deg,#333,#000,#333);height:60%;width:50%;position:absolute;top:0;right:0;z-index:1;transform:translateX(50%);border-color:#666 #222 #111 #555;border-style:solid;border-width:2px 4px 15px;box-shadow:inset 0 -1px 2px hsla(0,0%,100%,.4),0 2px 3px rgba(0,0,0,.4);transition:opacity .1s linear;opacity:0}#keys .key .black.active{border-bottom-width:5px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}