@font-face{font-family:EnterCommand;src:url(https://manz.dev/assets/fonts/entercommand.woff2) format("woff2"),url(https://manz.dev/assets/fonts/entercommand.woff) format("woff");font-display:swap}body{background:#223}.container{width:600px;margin:2em auto;display:grid;place-items:center}.afor{width:500px;filter:drop-shadow(3px 3px 4px var(--bgcolor, #5c16c4));transform:rotate(var(--rotate, 0)) scale(var(--scale, 1))}.piano-case{width:550px;height:300px;background:#090909;box-shadow:0 5px 4px 4px #000,0 -5px 4px 4px #000,0 -2px 10px 10px var(--bgcolor, #5c16c4);border-radius:0 0 10px 10px;display:flex;justify-content:center;position:relative}.mini-piano{display:flex;width:98%;height:96%}.key{width:100%;height:100%;background:linear-gradient(#ccc,#fff);border:2px solid #000;border-radius:0 0 10px 10px;cursor:pointer;box-shadow:-4px 0 8px #0008 inset;display:grid;place-items:end center;color:#ccc;user-select:none}.key span{font-family:Montserrat,sans-serif;font-weight:lighter;translate:0 -20px}.key-3,.key-5{background:linear-gradient(#000,#222);width:15%;height:50%;position:absolute;color:#000}.key-3{translate:176px}.key-5{translate:287px}.key:active,.key.pressed{background:linear-gradient(#fff 40%,#ccc 60%)}.key-3:active,.key-5:active,.key-3.pressed,.key-5.pressed{background:linear-gradient(#222,#000)}p,a{font-family:EnterCommand,monospace;font-size:1.5rem;color:#8841f3}a{color:#fff}a:hover{color:gold}