*,:after,:before{box-sizing:border-box}body,html{font-family:system-ui;height:100vh;margin:0;width:100vw}button{outline:none}.App,.overlay{height:100vh;width:100vw}.overlay{align-items:center;background-color:#ffffffd7;display:flex;justify-content:center;position:absolute;z-index:1}.startBtn{background-color:#fff;border-style:none;color:#000;cursor:pointer;font-size:4vmin;font-weight:700;height:25vmin;letter-spacing:7px;margin:0;padding:0;position:relative;text-transform:uppercase;transition:all .5s;width:60vmin}.startBtn:before{border-bottom:1px solid #000;border-top:1px solid #000;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;-webkit-transform:scaleX(.1);transform:scaleX(.1);transition:all .5s;width:100%}.startBtn:hover:before{opacity:1;-webkit-transform:scale(1);transform:scale(1)}.startBtn:hover{background-color:transparent}.board{border:1vmin solid #7272ac;display:flex;flex-direction:column;height:47vmin;width:47vmin}.xaxis{display:flex;width:100%}.unit{border-radius:50%;height:3vmin;width:3vmin}.snake{background-color:#b8dfd8}.food{background-color:#ffc074;position:relative}.food:after{-webkit-animation:shine 1s linear infinite;animation:shine 1s linear infinite;background-color:#faf74c93;border-radius:50%;content:"";height:4vmin;left:-.5vmin;position:absolute;top:-.5vmin;width:4vmin}@-webkit-keyframes shine{0%{opacity:0}25%{opacity:.4}to{opacity:0}}@keyframes shine{0%{opacity:0}25%{opacity:.4}to{opacity:0}}.shakingSnake{-webkit-animation:shake;animation:shake;-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.paused{-webkit-animation-play-state:paused;animation-play-state:paused}.running{-webkit-animation-play-state:running;animation-play-state:running}@-webkit-keyframes shake{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-1px,1px);transform:translate(-1px,1px)}40%{-webkit-transform:translate(1px,-1px);transform:translate(1px,-1px)}60%{-webkit-transform:translate(2px);transform:translate(2px)}80%{-webkit-transform:translate(-1px,-2px);transform:translate(-1px,-2px)}to{-webkit-transform:translate(0);transform:translate(0)}}@keyframes shake{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-1px,1px);transform:translate(-1px,1px)}40%{-webkit-transform:translate(1px,-1px);transform:translate(1px,-1px)}60%{-webkit-transform:translate(2px);transform:translate(2px)}80%{-webkit-transform:translate(-1px,-2px);transform:translate(-1px,-2px)}to{-webkit-transform:translate(0);transform:translate(0)}}.scoreBoard{color:#faebe0;font-size:5vmin;font-weight:600;letter-spacing:3px;margin:20px;text-transform:uppercase}span{margin-left:20px}.virtualkeyboard{align-items:center;flex-direction:column;height:40vmin;margin:40px 40px 0;width:40vmin}.mid-btn,.virtualkeyboard{display:flex;justify-content:space-between}.mid-btn{width:100%}.btn{background-color:transparent;border:none;cursor:pointer;height:12vmin;margin:0;padding:0;position:relative;width:12vmin}.up:after{border:solid;border-color:transparent transparent #ed8a0a;border-width:4vmin 4vmin 5vmin;bottom:4vmin}.down:after,.up:after{content:"";position:absolute;right:2vmin}.down:after{border:solid;border-color:#ed8a0a transparent transparent;border-width:5vmin 4vmin 4vmin;top:4vmin}.left:after{border:solid;border-color:transparent #ed8a0a transparent transparent;border-width:4vmin 5vmin 4vmin 4vmin;right:4vmin}.left:after,.right:after{bottom:2vmin;content:"";position:absolute}.right:after{border:solid;border-color:transparent transparent transparent #ed8a0a;border-width:4vmin 4vmin 4vmin 5vmin;left:4vmin}.game{align-content:center;align-items:center;background-color:#4c4c6d;display:flex;flex-direction:column;flex-wrap:wrap;height:100%;justify-content:center;width:100%}
/*# sourceMappingURL=main.e9067612.css.map*/