@import url(https://fonts.googleapis.com/css2?family=Rubik+Doodle+Shadow&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box;font-family:Rubik Doodle Shadow;margin:0;padding:0}.hide-element{opacity:0;pointer-events:none}#ins-btn:hover{color:#0f0;cursor:pointer;transform:scale(.9)}#ins-btn{background:#000;color:red;font-size:12pt;padding:.5rem .75rem;top:10px;transition:.25s}#ins-btn,#ins-container{position:absolute;right:10px;z-index:999}#ins-container{background:#fff;max-width:300px;padding:.5rem;text-align:center;top:25%;transition:.5s}#ins-text{margin-bottom:.5rem}#ins-subtext{background:#000;color:red;font-family:Arial,Helvetica,sans-serif;letter-spacing:1.05px;padding:.5rem}body{background:silver;scroll-behavior:smooth}#keypad-container{flex-direction:column;height:100px;justify-content:center;margin-bottom:1rem;width:225px}#keypad-container,.keypad-list{align-items:center;display:flex}.keypad-list{height:100%;position:relative;width:100%}.key-down,.key-left,.key-right,.key-up{border:4px solid #fff;font-size:50px;margin:0 auto}.key-down:hover,.key-left:hover,.key-right:hover,.key-up:hover{cursor:pointer;transform:scale(1.15);transition:.25s}body{height:100vh}#display-container,body{align-items:center;display:flex;flex-direction:column;justify-content:center}#display-container{flex-wrap:wrap;height:500px;left:5%;position:absolute;top:10%;width:300px}#display{color:#333;font-size:36px;letter-spacing:.25px;margin:1rem 1.5rem;text-align:center;text-shadow:1px 1px .25px #3d3d3d}.animationFix{animation:colorChange 5s ease-in-out infinite alternate forwards}@keyframes colorChange{0%{color:purple;transform:scale(1.15)}25%{color:#333;transform:scale(1.25)}50%{color:red;transform:scale(1.15)}75%{color:#333;transform:scale(1.25)}to{color:blue;transform:scale(1.15)}}#canvas-container{align-items:center;display:flex;flex-direction:column;gap:0;justify-content:center;margin-top:2rem;position:relative;width:100%}#canvas-actual{background:#333;height:500px;width:500px}.snake{background:lime;border:4px solid green}#food,.snake{height:25px;position:absolute;width:25px}#food{background:red;border:4px solid #772121;transition:.15s ease-in-out}.btn-container{align-items:center;background:silver;border:none;box-shadow:0 .25rem 6px 1.5px #333;display:flex;flex-direction:column;justify-content:center;margin-top:-2.5rem;overflow:hidden;transform:scale(1.05)}.btn-container:hover{animation:startMe 1.25s ease infinite alternate}@keyframes startMe{0%{box-shadow:0 .25rem 6px 1.5px #333;transform:scale(1.05)}to{box-shadow:none;transform:scale(1)}}#btn{cursor:pointer;font-size:2rem;padding:1.5rem}#btn,#btn:hover{border:none;transition:.3s}#btn:hover{color:#fff}#score{font-size:2rem;margin-bottom:-4rem;margin-top:2rem}@media (max-width:1300px){#display{font-size:21px;text-align:center;text-shadow:none}#display-container{height:100px;left:0;text-align:center;top:2%;width:100%}#canvas-actual{height:350px;width:350px}}@media (max-width:400px) and (max-height:900px){#canvas-container{gap:0;margin-bottom:6rem;margin-top:0}#ins-container{top:100px!important}#canvas-actual{height:275px;width:275px}.btn-container{bottom:-250px;height:45px;margin-top:-.75rem;position:absolute;transform:scale(1);width:100%}#btn{font-size:1rem;margin-top:0;width:inherit}#score{display:none;margin-top:1rem}#food,.snake{height:22px;width:22px}#display-container{left:0;top:6%;width:100%}#display{font-size:15px;text-align:center;text-shadow:none}#keypad-container{bottom:-175px;position:absolute}}@media (max-height:400px) and (max-width:900px){#canvas-container{gap:0;margin-bottom:-1.5rem;margin-top:0}#canvas-actual{height:275px;width:275px}.btn-container{bottom:100px;margin-top:-.75rem;position:absolute;right:-50%;transform:scale(1)}#btn{font-size:1rem;margin-top:0}#score{display:none;margin-top:1rem}#food,.snake{height:22px;width:22px}#display-container{left:0;top:-25px;width:100%}#display{font-size:15px;text-align:center;text-shadow:none}#keypad-container{left:-227px;position:absolute;top:35%}.key-down,.key-left,.key-right,.key-up{font-size:45px;margin:0 auto}}
/*# sourceMappingURL=main.e1c7f0c4.css.map*/