/* v.1.0.3 */



.square {
display: inline-flex;
height: 30px;
width: 30px;

/*outline: 1px solid var(--red);*/
font-size: xx-small;
align-items: center;
justify-content: center;
text-align: center;
margin: 0;
padding: 0;
box-sizing: border-box;
}

.square2 {
height: 30px;
width: 30px;
box-sizing: border-box;
}

br { margin: 0 !important; padding: 0 !important; }

#result {
display: grid;
grid-template-columns:
1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-auto-columns: 0;
grid-gap: 0px;
margin: 0;
padding: 0;
justify-content: center;
align-items: center;
text-align: center;

}

#result {
text-align: center;
}


@media(max-width: 400px) {
.square { 
height: 25px;
width: 25px;
font-size: 13px !important;
}
}

@media(max-width: 300px) {
.square { 
height: 14px;
width: 15px;
font-size: 10px !important;
}
}

@media(max-width: 180px) {
.square { 
height: 10px;
width: 10px;
font-size: 9px !important;
}
}

@media(max-width: 100px) {
.square { 
height: 5px;
width: 5px;
font-size: 9px !important;
}
}


.snakeGreen { background: var(--green) !important; border: 1px solid var(--d2); }
.snakeHead { background: var(--green2) !important; border: 1px inset var(--d2); }
.food { background: var(--orange2); border: 1px solid var(--d2); }


.control { text-align: center; }
.control .button { display: inline-block; min-width: 50px; }