html{box-sizing:border-box}*,:before,:after{box-sizing:inherit}body{height:100vh;align-items:center;margin:0;display:flex}body>div{margin:auto}:root{--keyboard:#0af;--keyboard-shadow:rgba(212,152,125,.2);--keyboard-border:#180901;--black-10:rgba(0,0,0,.1);--black-20:rgba(0,0,0,.2);--black-30:rgba(0,0,0,.3);--black-50:rgba(0,0,0,.5);--black-60:rgba(0,0,0,.6);--white-20:rgba(255,255,255,.2);--white-50:rgba(255,255,255,.5);--white-80:rgba(255,255,255,.8)}.white,.black{float:left;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;justify-content:center;align-items:flex-end;padding:.5rem 0;display:flex;position:relative}#keyboard li:first-child{border-radius:5px 0 5px 5px}#keyboard li:last-child{border-radius:0 5px 5px}.white{height:12.5rem;width:3.5rem;z-index:1;box-shadow:-1px 0 0 var(--white-80)inset,0 0 5px #ccc inset,0 0 3px var(--black-20);color:var(--black-30);background:linear-gradient(#ededed 0%,#fff 100%);border-bottom:1px solid #bababa;border-left:1px solid #bababa;border-radius:0 0 5px 5px}.black{height:8rem;width:2rem;z-index:2;box-shadow:-1px -1px 2px var(--white-20)inset,0 -5px 2px 3px var(--black-60)inset,0 2px 4px var(--black-50);color:var(--white-50);background:linear-gradient(45deg,#212121 0%,#545454 100%);border:1px solid #000;border-radius:0 0 3px 3px;margin:0 0 0 -1rem}.white.pressed{box-shadow:2px 0 3px var(--black-10)inset,-5px 5px 20px var(--black-20)inset,0 0 3px var(--black-20);background:linear-gradient(#fff 0%,#e8e8e8 100%);border-top:1px solid #787878;border-bottom:1px solid #999;border-left:1px solid #999;outline:0}.black.pressed{box-shadow:-1px -1px 2px var(--white-20)inset,0 -2px 2px 3px var(--black-60)inset,0 1px 2px var(--black-50);background:linear-gradient(90deg,#454545 0%,#212121 100%);outline:0}.offset{margin:0 0 0 -1rem}#keyboard{height:15.25rem;width:1325px;border:1px solid var(--keyboard-border);background-color:var(--keyboard);box-shadow:0 0 50px var(--black-50)inset,0 1px var(--keyboard-shadow)inset,0 5px 15px var(--black-50);border-radius:1rem;margin:.5rem auto;padding:3rem 0 0 3rem;position:relative;overflow-y:visible}.key{color:rgba(0,0,0,0)}#display{min-height:120px;width:400px;background:#383e25;align-items:center;margin:auto;display:flex;position:relative;box-shadow:inset 1px 1px 7px #050505,0 0 4px 2px #000,0 0 4px 2px #777}#display:hover{background:#383e25;box-shadow:inset 1px 1px 6px #050505,0 0 4px 2px #000,0 0 4px 2px #777}#display:hover span{color:#fff}#display span{color:#111;text-shadow:3px 2px rgba(0,0,0,.2);margin:auto;font-size:28pt;display:block}#credits{color:gray;font-size:12px;position:fixed;bottom:20px;right:20px}#credits a{color:gray}
/*# sourceMappingURL=index.14a1c72a.css.map */