@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Poppins:wght@100;200;300;400;500;600;700&display=swap";.center{display:flex;justify-content:center;align-items:center;width:100vw;height:100dvh;background-image:url(/assets/wood-f5dfd1a0.jpg);background-repeat:no-repeat;background-size:cover;flex-direction:column}.center h1{color:#fff;-webkit-text-stroke:3px #58250d;font-size:3em;text-shadow:2px 2px 0 rgba(0,0,0,.8),3px 3px 5px rgba(0,0,0,.9)}.border{border-radius:10px;width:500px;height:500px;border:10px solid #d5884e;background-color:#d5884e;box-shadow:0 0 8px #000c}.container{width:100%;height:100%;border-radius:6px;background-color:#fff;box-shadow:inset 3px 3px 3px #000c,inset -3px -3px 3px #000c;padding:3px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);background-color:#482713;grid-template-areas:". . . ." ". . . ." ". . . ." ". . . ."}.container span{display:flex;align-items:center;justify-content:center;background-color:#fff;box-shadow:inset 0 0 3px #833000cc;border:3px solid #482713;font-size:50px;color:#995424;font-weight:bolder;cursor:pointer;text-shadow:1px 1px 2px rgba(0,0,0,.5);transition:1s all ease}.container .empty-space{border:none;background-color:#482713;box-shadow:inset 0 0 3px #000c;cursor:inherit;transition:.5s all ease;width:100%;height:100%}.container span:first-child{border-top-left-radius:7px}.container span:nth-child(4){border-top-right-radius:7px}.container span:nth-child(13){border-bottom-left-radius:7px}.container span:nth-child(16){border-bottom-right-radius:7px}.left{animation:left .1s linear 0s;animation-fill-mode:both}.bottom{animation:bottom .1s linear 0s;animation-fill-mode:both}.right{animation:right .1s linear 0s;animation-fill-mode:both}.top{animation:top .1s linear 0s;animation-fill-mode:both}@keyframes bottom{0%{transform:translate(0)}to{transform:translateY(100%)}}@keyframes right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes top{0%{transform:translate(0)}to{transform:translateY(-50%)}}.bottom-content{display:flex;margin:10px;gap:10px}.bottom-content button{border:3px solid #58250d;background-color:#58250d;padding:5px;color:#fff;font-size:20px;border-radius:6px;box-shadow:2px 2px #000c;cursor:pointer}.bottom-content button:active{box-shadow:none;transform:translate(2px,2px)}.stopwatch{border:3px solid #58250d;background-color:#fff;padding:5px;font-size:20px;border-radius:6px;box-shadow:0 0 3px #000c,inset 2px 2px #000c,inset -2px -2px #000c;display:flex;align-items:center;justify-content:center}.joy-stick{display:flex;justify-content:center;align-items:center;gap:3px;position:absolute;bottom:5dvh;opacity:.5}.joy-stick div{display:flex;flex-direction:column;gap:8px}.joy-stick span{border:3px solid #58250d;background-color:#58250d;padding:5px;color:#fff;font-size:15px;border-radius:6px;box-shadow:1px 1px #00000080;cursor:pointer;width:35px;height:35px;display:flex;align-items:center;justify-content:center}@media only screen and (max-width: 600px){.border{width:300px;height:300px}.center h1{font-size:2.5em}.container span{font-size:25px}.stopwatch{font-size:10px}}@media only screen and (max-width: 350px){.border{width:200px;height:200px}.center h1{font-size:2.5em}.container span{font-size:20px;border:1px solid #482713}}*{padding:0;margin:0;box-sizing:border-box}body{font-family:Poppins;color:#313132}