@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap');

:root {
    --h1-font-size: 2vw;
    --h2-font-size: 1.8vw;
    --p-font-size: 2vw;
}

*,
*::after,
*::before {
    font-family: 'Bubblegum Sans', sans-serif;
    margin: 0px;
    color: black;
    font-size: 1.5rem;
}

body {
    margin: 0;
    background-image: url("assets/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

.hide {
    display: none
}

#main-container {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-evenly;
}

#side-pane {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

}

#game-board {
    height: 100vmin;
    width: 100vmin;
    order: 2;
    display: grid;
    grid-template-columns: repeat(21, auto);
    grid-template-rows: repeat(21, auto);
    background-image: url("assets/gameboard.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.5);
}

.logo img {
    width: 20vw;
    margin-bottom: 2vh;
}

.slider-container {
    margin: 0.8vw;
}

.slider-labels {
    font-size: 2vw;
}

.slider-value {
    font-size: 2vw;
}

input[type="range"] {
    display: block;
    width: 20vw;
}

.repo-link {
    height: 5vmin;
}

.repo-link a {
    font-weight: lighter;
    font-size: 1.8vw;
    color: #14539a;
    text-decoration: none;
}

.repo-link img {
    margin-left: 0.5vmin;
    height: 100%;
    transform: translateY(25%);
}

.game-over {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.game-over-panel {
    display: block;
    width: 50%;
    height: auto;
    object-fit: cover;
    margin: auto;
}

.game-over-content {
    width: 40vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.game-over-content h1 {
    color: aliceblue;
    font-size: 4vw;
    margin-bottom: 3vw;
}

#restart {
    background: transparent;
    border: none;
    cursor: pointer;
}

#restart img {
    width: 10vw;
    height: 10vw;
    transform: scale(1);
    transition: transform 0.5s ease-out;
}

#restart img:hover {
    transform: scale(1.2)
}

.snake {
    background-image: url("assets/body.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.head-up {
    background-image: url("assets/head-up.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.head-down {
    background-image: url("assets/head-down.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.head-right {
    background-image: url("assets/head-right.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.head-left {
    background-image: url("assets/head-left.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.tail-up {
    background-image: url("assets/tail-up.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.tail-down {
    background-image: url("assets/tail-down.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.tail-right {
    background-image: url("assets/tail-right.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.tail-left {
    background-image: url("assets/tail-left.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.corner-top-left {
    background-image: url("assets/corner-top-left.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.corner-top-right {
    background-image: url("assets/corner-top-right.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.corner-bottom-left {
    background-image: url("assets/corner-bottom-left.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.corner-bottom-right {
    background-image: url("assets/corner-bottom-right.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.food {
    background-image: url("assets/food.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}