:root{--bg-black: #1D1C2E;--light-purple: #4F4965;--txt-white: #EFEFEF;--red: #DD4444;--light-red: #FF6666;--green: #60DD60;--light-green: #81FF81}@keyframes bulge{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes bulge-text{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes displacement{to{transform:translateY(-40px)}}@keyframes up-down{0%{transform:translateY(0)}50%{transform:translateY(5px)}to{transform:translateY(0)}}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-10px)}50%{transform:translate(10px)}75%{transform:translate(-10px)}to{transform:translate(10px)}}@keyframes blink{0%{opacity:1}25%{opacity:0}50%{opacity:1}75%{opacity:0}to{opacity:1}}*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:0;height:100vh;color:var(--txt-white);background-color:var(--bg-black);font-family:Pixelify Sans,"Micro 5",Verdana,Geneva,Tahoma,sans-serif}main{width:100%;height:100%;padding-left:20px;padding-block:10px;display:flex;align-items:center;gap:10px}h1,h2,h3{font-family:"Micro 5",Pixelify Sans,Verdana,Geneva,Tahoma,sans-serif}button{display:block;font-size:3rem;padding:0 10px;color:var(--bg-black);background-color:var(--green);font-family:"Micro 5",Pixelify Sans,Verdana,Geneva,Tahoma,sans-serif;margin:auto;border:none;border-radius:5px;transition:transform .25s ease-in-out;cursor:pointer}button:hover{transform:scale(1.1)}button:active{color:var(--green);background-color:var(--bg-black)}.shake{animation:shake .25s linear infinite;animation-duration:.25s}.blink{animation:blink 2.25s linear infinite}.grid-section{padding:30px;width:fit-content;border-radius:20px;border:2px solid var(--light-purple)}.grid-cell{border:1px solid #4F496544}.small-food{display:grid;align-self:center;justify-self:center;width:15px;height:15px;border:none;border-radius:50%;background-color:var(--red);box-shadow:0 0 10px 0 var(--light-red);animation:bulge 1.5s alternate infinite}.big-food{display:grid;align-self:center;justify-self:center;width:25px;height:25px;border:none;border-radius:50%;background-color:orange;box-shadow:0 0 10px orange;animation:bulge 1.5s alternate infinite}.snake{background-color:var(--light-green);box-shadow:0 0 5px 0 var(--light-green);padding-right:2px;border-radius:5px}.eyes{width:100%;height:100%;display:flex;flex-direction:column-reverse;justify-content:space-evenly;align-items:center}.eye{width:10px;height:10px;background-color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}.eyeball{width:5px;height:5px;background-color:#000;border-radius:50%}.eye-dead{width:20px}.settings-and-stats{width:330px;height:100vh;margin-top:-10px;margin-left:auto;padding:10px 0 10px 10px;border-left:4px solid var(--light-purple);overflow:hidden}.settings-and-stats h1{font-size:3.5rem;font-family:"Micro 5",Pixelify Sans,Verdana,Geneva,Tahoma,sans-serif;color:var(--light-green);text-align:center;text-shadow:0 0 20px var(--green);margin-top:-1px;animation:bulge-text 1.75s ease-in-out infinite}.score-display{display:flex;gap:5px}.score-display h2{font-size:2rem}.score-display h2:nth-of-type(1){font-family:"Micro 5",Pixelify Sans,Verdana,Geneva,Tahoma,sans-serif}.score{color:var(--light-red);font-family:Pixelify Sans,"Micro 5",Verdana,Geneva,Tahoma,sans-serif;text-shadow:0 0 10px var(--light-red);width:235px;padding-left:5px;border-radius:5px;background-color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-increment{font-size:3rem;color:var(--light-green);font-family:Pixelify Sans,"Micro 5",Verdana,Geneva,Tahoma,sans-serif;margin-top:4px;margin-left:70px;animation:displacement 1.2s ease-in-out}.game-over{width:800px;height:600px;border-radius:10px;border:4px solid var(--light-purple);background-color:var(--bg-black);background:radial-gradient(#DD444444,var(--bg-black));position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.game-over h1{font-size:8rem;text-align:center;animation:up-down 1.5s ease-in-out infinite}.game-over h2{margin-top:-30px;color:var(--red);font-size:2rem;text-align:center;font-family:Pixelify Sans,"Micro 5",Verdana,Geneva,Tahoma,sans-serif}.game-over-reason{margin-top:-60px;display:flex;justify-content:center;align-items:baseline}.game-over-reason h2{color:var(--red);font-size:3rem;text-align:center;font-family:Pixelify Sans,"Micro 5",Verdana,Geneva,Tahoma,sans-serif}.exclamation{margin-top:-75px;color:var(--txt-white);font-size:3.5rem;animation:up-down 1.75s ease-in-out infinite;font-family:Pixelify Sans,"Micro 5",Verdana,Geneva,Tahoma,sans-serif}.new-game-btn{margin-top:25px}.tip{font-size:1.5rem;color:var(--green);font-family:Pixelify Sans,"Micro 5",Verdana,Geneva,Tahoma,sans-serif;text-align:center;margin-top:75px}.tip span{font-size:2.4rem;font-family:"Micro 5",Pixelify Sans,Verdana,Geneva,Tahoma,sans-serif}.start-game-section{margin:auto;display:flex;flex-direction:column;gap:50px}.start-game{font-size:5rem;margin:auto;animation:bulge-text 1.75s ease-in-out infinite}.start-game span{color:var(--green)}.controls-section{position:absolute;top:350px;display:flex;flex-direction:column;align-items:center;gap:30px}.flex{display:flex}.button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:5px;background-color:#444;border:2px solid #00FF00;color:#0f0;opacity:.75;font-size:20px;font-weight:700;text-shadow:1px 1px 0 #222;transition:all .2s ease-in-out;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:7px}.button:hover{opacity:.65}.button:active{transform:scale(.95);background-color:#333}.text{margin:10px;font-size:1.5rem}.or{font-size:3rem}.arrow-keys-container,.wasd-container{display:flex;flex-direction:column;align-items:center}.arrow-row{display:flex;justify-content:center}.wasd,.arrow-keys{gap:20px;display:flex;justify-content:center;align-items:center}