* {
    margin: 0;
    font-family: "Press Start 2P", monospace;
    background-color: #9BBC0F;
    
}

html, body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* prevent touch zoom on mobile */ 
img.controlBtn {
    touch-action: manipulation;
}

/* Screen */

.screen {
    position: absolute;
    width: 200px;
    height: 200px;
    bottom: 46%;
    display: block;
}

/* Scoreboard */

.scores {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 12px;
}

#score, 
#high-score {
    color: #0f380f;
    font-size: 20px;
    margin: 10px 0;
}

#high-score {
    display: none;
}


/* Game Board */

#game-board {
    display: grid;
    grid-template-columns: repeat(20, 16px);
    grid-template-rows: repeat(20, 16px);
    border-radius: 100px;
    margin: 5px;
}

.border1 {
    border: #0f380f solid 10px;
    box-shadow: inset 0 0 0 10px #0f380f;
}

.border2 {
    border: #306230 solid 8px;
    box-shadow: inset 0 0 0 8px #306230;
}

.border3 {
    border: #8bac0f solid 5px;
    box-shadow: inset 0 0 0 5px #8bac0f;
}


/* Contoller */

.controller {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.arrows {
    display: flex;
    align-items: center;
}

.arrows2 {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.arrows > img, 
.arrows2 > img {
    width: 65px;
    cursor: pointer;
}

.btns > img {
    width: 75px;
    cursor: pointer;
}

.btns {
    display: flex;
}

.btn1 {
    margin-top: 50px;
}

.btn2 {
    margin-bottom: 50px;
}

/* Snake */

.ace {
    background-color: #0f380f;
    border: #306230 1px dotted;
}

.fang {
    background-color: #306230;
    border: #0f380f 3px dashed;
}

.zig {
    background-color: #8bac0f;
    border: #306230 1px ridge;
}

.food {
    background-color: #0f380f;
    border: #306230 3px solid;
}

.poison-food {
    background-color: #8bac0f;
    border: #306230 6px dotted;
}