:root {
  --main-color: rgb(130, 224, 120);
}

.navbutton{
  background-color: var(--main-color);
}
#canvas{
    background-color: rgb(204, 169, 103);
}
.game-title{
    color: var(--main-color);
}



.phone-container {
    display: flex;
}

.tile{
    background-color: rgb(139, 120, 76);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}
.container {
    margin: auto;
    display: grid;
    grid-template-columns: repeat(15, 32px);
    grid-template-rows: repeat(15, 32px);
    gap: 0px;
    justify-content: center;
    border: solid rgb(75, 58, 42) 5px;
    box-shadow: rgba(58, 44, 31, 0.5) 10px 10px;
    background-size: cover;
}

.snake-head-right {
    background-image: url('./snake_head_right.png');
}
.snake-head-left {
    background-image: url('./snake_head_left.png');
}
.snake-head-up {
    background-image: url('./snake_head_up.png');
}
.snake-head-down {
    background-image: url('./snake_head_down.png');
}

.snake-tail-right {
    background-image: url('./snake_tail_right.png');
}
.snake-tail-left {
    background-image: url('./snake_tail_left.png');
}
.snake-tail-up {
    background-image: url('./snake_tail_up.png');
}
.snake-tail-down {
    background-image: url('./snake_tail_down.png');
}

.snake-body-vertical {
    background-image: url('./snake_body_vertical.png');
}
.snake-body-horizontal {
    background-image: url('./snake_body_horizontal.png');
}

.snake-body-top-right {
    background-image: url('./snake_body_top_right.png');
}
.snake-body-top-left {
    background-image: url('./snake_body_top_left.png');
}
.snake-body-bottom-right {
    background-image: url('./snake_body_bottom_right.png');
}
.snake-body-bottom-left {
    background-image: url('./snake_body_bottom_left.png');
}

.apple {
    background-image: url('./apple.png');
    background-position: -1px 0px;
}