*{--bg-color: #111821;--border-color: rgba(211, 211, 211, .36);--button-primary: #6e59ff;--button-secondary: #e5e9ff;--apple-color: #ff5252;--snake-head: rgb(92, 211, 250);--snake-tail: lightblue}body{display:flex;background:var(--bg-color);color:#fff}#root{align-self:center;display:flex;flex-direction:column}.App{font-family:sans-serif;display:flex;flex-direction:column;padding:1rem;gap:2rem}.menu{display:flex;flex-direction:column;gap:.5rem}.menu label{display:flex;justify-content:space-between}.menu label span{min-width:60px}label{display:flex;gap:.5rem;align-items:center}.grid-wrapper{display:flex;flex-direction:column;align-self:start;align-items:center}.grid-wrapper .score{display:flex;gap:.25rem;align-self:flex-end}.grid-wrapper .score .score-value{min-width:40px;text-align:right}.grid-wrapper .grid{height:300px;width:300px;display:grid}.grid-wrapper .game-over{display:flex;flex-direction:column}.grid-wrapper .game-over .reset-btn{background:var(--button-primary);color:#fff;border:none;font-size:1.1rem;padding:.5rem 1rem;position:relative;cursor:pointer}.grid-wrapper .game-over .reset-btn:before{content:"";height:100%;width:100%;background:var(--button-secondary);position:absolute;left:3px;top:3px;z-index:-1}.square{position:relative;display:flex;align-items:center;justify-content:center;border:solid var(--border-color) 1px}.square.tail:after,.square.head:after{position:relative;content:"";height:100%;width:100%;border-radius:8px}.square.tail:after{background-color:var(--snake-tail)}.square.head:after{background-color:var(--snake-head)}.square.apple:after{position:relative;content:"";height:50%;width:50%;background-color:var(--apple-color);border-radius:100%}