nav.svelte-1ufqzk6.svelte-1ufqzk6{box-sizing:border-box;display:flex;justify-content:center;align-items:center;height:100vh;position:fixed}.piano.svelte-1ufqzk6.svelte-1ufqzk6{display:flex;flex-direction:column;position:relative}.key.svelte-1ufqzk6.svelte-1ufqzk6{display:block;border-radius:.15em;display:flex;align-items:end;justify-content:end;font-family:Raleway;font-size:1.2em;text-transform:capitalize;text-decoration:none;color:#000;-webkit-user-select:none;-ms-user-select:none;user-select:none}.key-link.svelte-1ufqzk6.svelte-1ufqzk6{text-decoration:none;display:block}.white.svelte-1ufqzk6.svelte-1ufqzk6{width:300px;height:8.33333vh;background-color:#fff;outline:1px solid black;transition:opacity .3s;z-index:3}a.svelte-1ufqzk6.svelte-1ufqzk6{z-index:3}.white.svelte-1ufqzk6 span.svelte-1ufqzk6{padding-bottom:.25em;padding-right:.25em}.key-link.svelte-1ufqzk6:hover .key.svelte-1ufqzk6{background-color:#f5f5f5;color:#888;transition:.2s}.key.svelte-1ufqzk6.svelte-1ufqzk6:active{transform:translateY(4px) translate(1px) rotate(1deg)}.black.svelte-1ufqzk6.svelte-1ufqzk6{width:140px;height:4vh;background:linear-gradient(#333,#000);margin-top:-2vh;margin-bottom:-2vh;z-index:10}.copyright.svelte-1ufqzk6.svelte-1ufqzk6{font-size:1em}main.svelte-1ufqzk6.svelte-1ufqzk6{position:fixed;left:300px;width:calc(100vw - 300px);flex-grow:1;box-sizing:border-box;overflow-y:auto;background-image:linear-gradient(15deg,#2d3436,#000 74%)}@media (max-width: 900px){nav.svelte-1ufqzk6.svelte-1ufqzk6{height:30vh;width:100vw;top:0;left:0;z-index:2}.piano.svelte-1ufqzk6.svelte-1ufqzk6{display:flex;flex-direction:row;width:100vw;height:30vh;align-items:center}.white.svelte-1ufqzk6.svelte-1ufqzk6{width:8.33333vw;height:30vh;writing-mode:vertical-rl;display:flex;align-items:center}.key.svelte-1ufqzk6.svelte-1ufqzk6:active{transform:translate(1px) rotate(-1deg);transform-origin:top left}.black.svelte-1ufqzk6.svelte-1ufqzk6{align-self:flex-start;width:4vw;height:15vh;margin-right:-2vw;margin-left:-2vw}main.svelte-1ufqzk6.svelte-1ufqzk6{position:fixed;top:30vh;left:0;width:100vw;height:70vh;font-size:.7em}.copyright.svelte-1ufqzk6.svelte-1ufqzk6{font-size:.7em;writing-mode:horizontal-tb}}@media (max-width: 500px){.white.svelte-1ufqzk6.svelte-1ufqzk6{width:14.2857vw}.hide.svelte-1ufqzk6.svelte-1ufqzk6{display:none}.black.svelte-1ufqzk6.svelte-1ufqzk6{align-self:flex-start;width:6vw;height:15vh;margin-right:-3vw;margin-left:-3vw}main.svelte-1ufqzk6.svelte-1ufqzk6{font-size:.7em}}