body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.game{overflow:hidden;-webkit-perspective:800px;perspective:800px;height:100vh;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;min-width:1200px;text-align:center}.keyboard{margin:2rem;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-animation:flatten 2s ease 1s 1 forwards;animation:flatten 2s ease 1s 1 forwards}.key-row{-webkit-animation:faceUp 2s ease 1s 1 forwards;animation:faceUp 2s ease 1s 1 forwards;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.key,.key-row{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center}.key{pointer-events:none;-webkit-align-items:center;align-items:center;box-sizing:border-box;margin:2px 1px;background-color:#3a3a3a;border-radius:5px;-webkit-animation:lightUp 2s ease 1s 1 forwards;animation:lightUp 2s ease 1s 1 forwards;color:red}.key-pressed{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(-10px) rotateX(4deg);transform:translateZ(-10px) rotateX(4deg);background-color:#ebebeb;color:#303030}.key-disabled{background-color:#a7a7a7;color:#000}@-webkit-keyframes flatten{0%{-webkit-transform:rotateX(0deg) translateZ(0);transform:rotateX(0deg) translateZ(0)}to{-webkit-transform:rotateX(42deg) translateZ(-180px);transform:rotateX(42deg) translateZ(-180px)}}@keyframes flatten{0%{-webkit-transform:rotateX(0deg) translateZ(0);transform:rotateX(0deg) translateZ(0)}to{-webkit-transform:rotateX(42deg) translateZ(-180px);transform:rotateX(42deg) translateZ(-180px)}}@-webkit-keyframes faceUp{0%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}to{-webkit-transform:rotateX(-8deg);transform:rotateX(-8deg)}}@keyframes faceUp{0%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}to{-webkit-transform:rotateX(-8deg);transform:rotateX(-8deg)}}@-webkit-keyframes lightUp{0%{box-shadow:none}to{box-shadow:0 0 15px 3px hsla(0,0%,9%,.7)}}@keyframes lightUp{0%{box-shadow:none}to{box-shadow:0 0 15px 3px hsla(0,0%,9%,.7)}}
/*# sourceMappingURL=main.4e5ac305.chunk.css.map */