* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main-container,
.game-container,
.sidebar,
.score-card,
.new-game-button,
.snake-game-area {
    display: flex;
}

.main-container {
    height: 100vh;
    width: 100vw;
    background-color: brown;
    justify-content: center;
    align-items: center;
}

.game-container,
.sidebar,
.new-game-button,
.snake-game-area {
    background-color: brown;
}

.score-card {
    background-color: rgb(209, 190, 154);
    border-radius: 1vh;
}

.snake-game-area {
    flex-wrap: wrap;
    background-color: blue;
}

.game-btn {
    height: 100%;
    width: 100%;
    background-color: green;
    font-weight: 400;
    border: none;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    font-size: 4vh;
}

.game-btn:hover {
    background-color: rgb(23, 179, 23);
}

.score-label,
.score-value {
    font-size: 4vh;
    font-weight: 500;
}

.snake-part {
    position: absolute;
    background-color: rgb(39, 2, 2);
}

@media (min-aspect-ratio: 1.2/1),
(aspect-ratio: 1.2/1) {
    .game-container {
        flex-direction: row;
        justify-content: space-around;
    }

    .sidebar {
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        width: 20vh;
        height: 100vh;
    }

    .new-game-button,
    .score-card {
        width: 16vh;
        height: 12vh;
        align-items: center;
        justify-content: center;
    }

    .score-card {
        flex-direction: column;
        align-items: start;
        padding: 2vh;
    }

    .snake-game-area {
        width: 100vh;
        height: 100vh;
    }

    .snake-game-area .square {
        width: calc(100vh/25);
        height: calc(100vh/25);
    }

    .head {
        height: calc(.95*(100vh/25));
        width: calc(.95*(100vh/25));
        top: calc(50% - (.95*(100vh/25))/2);
        left: 50%;
    }
}

@media (max-aspect-ratio: 1.2/1) {
    .game-container {
        flex-direction: column;
    }

    .sidebar {
        flex-direction: row;
        width: min(100vw, 90vh);
        justify-content: space-evenly;
        align-items: center;
        height: 10vh;
    }

    .new-game-button,
    .score-card {
        width: 35vh;
        height: 6vh;
        justify-content: center;
        align-items: center;
    }

    .score-card {
        flex-direction: row;
    }

    .snake-game-area {
        width: min(100vw, 90vh);
        height: min(100vw, 90vh);
    }

    .snake-game-area .square {
        width: calc((min(100vw, 90vh))/25);
        height: calc((min(100vw, 90vh))/25);
    }

    .head {
        height: calc(.95*((min(100vw, 90vh))/25));
        width: calc(.95*((min(100vw, 90vh))/25));
        top: calc(50% - (.95*((min(100vw, 90vh))/25))/2);
        left: 50%;
    }
}