:root{--background-2:#09090b;--background-3:#0f172a;--contrast:#fff;--size:5rem}.icon{width:2.25rem;height:2.25rem}.board{gap:calc(var(--size) * .05)}.key{position:relative;width:var(--size);height:var(--size);font-size:calc(var(--size) / 2);border:.1rem solid var(--background-3);border-radius:calc(var(--size) * .2);background:var(--background-2);color:var(--contrast);box-shadow:.15rem .15rem 0 0 var(--background-3),.3rem .3rem 0 0 var(--background-3),.45rem .45rem 0 0 var(--background-3),.6rem .6rem 0 0 var(--background-3);transition:.2s ease;display:flex;align-items:center;justify-content:center}.key:hover{cursor:pointer;transform:translateX(.3rem) translateY(.3rem);box-shadow:.15rem .15rem 0 0 var(--background-3),.3rem .3rem 0 0 var(--background-3),.45rem .45rem 0 0 var(--background-3),.5rem .5rem 0 0 var(--background-3)}.key:active{cursor:grabbing;transform:translateX(.8rem) translateY(.8rem);box-shadow:.1rem .1rem 0 0 var(--background-3),.1rem .1rem 0 0 var(--background-3),.2rem .2rem 0 0 var(--background-3),.2rem .2rem 0 0 var(--background-3);filter:blur(.02rem)}.key.spaceBar{width:20dvw}@media (max-width:640px){:root{--size:3rem}.icon{width:1.5rem;height:1.5rem}}