.game-board{background:0 0;border:2px solid #b2a9a94d;border-radius:8px;grid-template-rows:repeat(20,20px);grid-template-columns:repeat(10,20px);width:100%;height:auto;margin-bottom:20px;display:grid}.key__button{box-sizing:border-box;text-align:center;color:#555;cursor:pointer;text-shadow:0 .5px 1px #777,0 2px 6px #f2f2f2;width:50px;height:50px;box-shadow:0 0 1px #888,0 1px 0 #fff, 0 6px 0 silver, 0 8px 17px rgba(#444, .4), 2px 1px 4px rgba(#444, .25), -2px 1px 4px rgba(#444, .25), 0 9px 16px rgba(#444, .1);background:-webkit-linear-gradient(silver 0%,#d2d2d2 20%,#f9f9f9 100%);border:1px solid #f2f2f2;border-radius:10px;justify-content:center;align-items:center;margin:0 5px;font-family:sans-serif;font-size:22px;line-height:50px;transition:box-shadow .3s,transform .15s;display:flex}.key__button:hover,.key__button:focus{box-shadow:0 0 1px #888,0 1px 0 #fff, 0 4px 0 silver, 0 2px 35px rgba(#444, .3), 2px 2px 4px rgba(#444, .25), -2px 2px 4px rgba(#444, .25), 0 7px 4px rgba(#444, .1);transform:translateY(2px)}.key__button:active,.key__button.active{box-shadow:0 0 1px #888,0 1px 0 #fff, 0 0 0 silver, 0 0px 30px rgba(#444, .15), 2px 2px 4px rgba(#444, .25), -2px 2px 4px rgba(#444, .25), 0 0px 4px rgba(#444, .25);transform:translateY(4px)}