.container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;--size:21px;--color:#562e7a}.snake-footer{font-size:.8em;margin-top:20px;max-width:calc(var(--size) * 18);text-align:center}@media (min-height:425px){.snake-footer{height:40px;font-size:1em}}.snake-header{display:flex;justify-content:space-between;width:calc(var(--size) * 22);font-size:1.4em;font-weight:900}.grid{display:grid;grid-template-columns:repeat(20,auto);grid-template-rows:repeat(15,auto);border:var(--size) solid var(--color)}.tile{position:relative;width:var(--size);height:var(--size)}.snake-content{position:absolute;width:100%;height:100%}