.game-board{border:2px solid color-mix(in srgb, var(--grey-400) 30%, transparent);background:0 0;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;width:50px;color:var(--grey-600);cursor:pointer;border-color:var(--grey-100);height:50px;text-shadow:0 .5px 1px var(--grey-500), 0 2px 6px var(--grey-100);background:-webkit-linear-gradient(top, var(--grey-50) 0%, var(--grey-300) 80%, var(--grey-300) 100%);box-shadow:0 0 1px var(--grey-500),0 1px 0 var(--white), 0 6px 0 var(--grey-300), 0 8px 17px color-mix(in srgb, var(--grey-700) 40%, transparent), 2px 1px 4px color-mix(in srgb, var(--grey-700) 25%, transparent), -2px 1px 4px color-mix(in srgb, var(--grey-700) 25%, transparent), 0 9px 16px color-mix(in srgb, var(--grey-700) 10%, transparent);border-style:solid;border-width:1px;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 var(--grey-500),0 1px 0 var(--white), 0 4px 0 var(--grey-300), 0 2px 35px color-mix(in srgb, var(--grey-700) 30%, transparent), 2px 2px 4px color-mix(in srgb, var(--grey-700) 25%, transparent), -2px 2px 4px color-mix(in srgb, var(--grey-700) 25%, transparent), 0 7px 4px color-mix(in srgb, var(--grey-700) 10%, transparent);transform:translateY(2px)}.key__button:active,.key__button.active{box-shadow:0 0 1px var(--grey-500),0 1px 0 var(--white), 0 0 0 var(--grey-300), 0 0px 30px color-mix(in srgb, var(--grey-700) 15%, transparent), 2px 2px 4px color-mix(in srgb, var(--grey-700) 25%, transparent), -2px 2px 4px color-mix(in srgb, var(--grey-700) 25%, transparent), 0 0px 4px color-mix(in srgb, var(--grey-700) 25%, transparent);transform:translateY(4px)}