@font-face{font-family:CrimsonText;font-style:normal;font-weight:400;src:url(/digital-keyboard/assets/CrimsonText-DY5CCzXv.ttf) format("truetype")}@font-face{font-family:Cooper;font-style:normal;font-weight:400;src:url(/digital-keyboard/assets/Cooper-Black-Da4l57_i.ttf) format("truetype")}:root{--color-soft: rgb(241, 241, 241);--color-accent: #007bff}:root{color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Cooper,sans-serif;margin:0;height:100vh;width:100vw;background-color:#c8a980}.room{background-color:#def673;position:absolute}.piano-notes{position:relative;gap:3px;transform-style:preserve-3d;display:flex;justify-content:center;align-items:center}.piano-base{background-color:#77613e;transform:translateY(20px)}.piano-notes .wrapper{transform-style:preserve-3d;position:relative;height:0}.key.white{background:#f9f9f9}.black-wrapper{transform-style:preserve-3d;position:absolute;transform:translateZ(-50px);top:-12px;right:-9px}.key.black{background-color:#242424}.key:hover{transform:rotateX(-5deg)}.bg-wood{background:peru}:root{--width: 100px;--height: 50px;--depth: 200px}.solid{position:relative;width:var(--width);height:var(--height);transform-style:preserve-3d;transition:transform .5s;transform-origin:50% 100% calc(var(--depth) / -2)}.face{position:absolute;border:1px solid #bfbfbf;display:flex;align-items:center;justify-content:center;font-size:24px;font-family:Arial,sans-serif;color:#333;background-color:inherit;transform-origin:top left}.face.front{width:var(--width);height:var(--height);transform:translateZ(calc(var(--depth)/2))}.face.back{width:var(--width);height:var(--height);transform:translateZ(calc(var(--depth)/-2))}.face.left{width:var(--height);height:var(--depth);transform:translateZ(calc(var(--depth)/-2)) rotateX(90deg) rotateY(90deg) translateZ(var(--width))}.face.right{width:var(--height);height:var(--depth);transform:translateZ(calc(var(--depth)/-2)) rotateX(90deg) rotateY(-90deg) translate(calc(var(--height)*-1))}.face.top{width:var(--width);height:var(--depth);transform:rotateX(90deg) translateY(calc(var(--depth)/-2))}.face.bottom{width:var(--width);height:var(--depth);transform:rotateX(90deg) rotateY(180deg) translateY(calc(var(--depth)/-2)) translateZ(calc(var(--height))) translate(calc(var(--width)*-1))}.perspective-context{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;perspective:800px;overflow:hidden}.perspective-camera{transform-style:preserve-3d;animation:camera-in 1.5s forwards cubic-bezier(.4,0,.2,1)}@keyframes camera-in{0%{transform:translate3d(0,300px,0) rotateX(120deg)}to{transform:translateZ(75px) rotateX(-40deg)}}.soundAllower{font-family:Cooper,sans-serif;color:var(--color-accent);font-size:2rem;bottom:1em;padding:1rem .5em;border-radius:50px;border:10px solid var(--color-accent);background-color:var(--color-soft);z-index:1000;position:fixed;left:50%;transform:translate3d(-50%,150%,0);transition:transform 1s cubic-bezier(.68,-.55,.27,1.55)}