:root {
    --primary-color-200: hsl(5, 70%,80%);
    --primary-color-400: hsl(5, 70%, 40%);
    --primary-color-600: hsl(5, 70%, 10%);
    --primary-color-800: hsl(5, 70%, 5%);
}

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

body {
    font-family: 'Press Start 2P', cursive;
    background-color: var(--primary-color-600);
    color: var( --primary-color-400);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    position: relative;
}

#grid {
    background-color: var(--primary-color-400);
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: repeat(15, 1fr);
    height: 75vmin;
    width: 75vmin;
    border-radius: .25rem;
    font-size: 1rem;
}

.heading-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 75vmin;
}

.title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.score {
    padding-right: 1rem;
}

.game-menu {
    color: var(--primary-color-800);
    width: 60vw;
    position: absolute;
    top: 40%;  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.game-over-menu-header {
    color: var(--primary-color-200);
    font-size: 2rem;
}

.game-over-button:link, .game-over-button:visited {
    display: inline-block;
    text-align: center;
    color: var(--primary-color-200);
    background-color: var(--primary-color-800);
    border-radius: .5rem;
    text-decoration: none;
    padding: 14px 25px;
    margin-top: 1rem;
    font-size: 1rem;
}

.game-over-button:hover, .game-over-button:active {
    background-color: var(--primary-color-600);
  }

.snake {
    background-color: var(--primary-color-600);
    border-radius: .5rem;
}
.food-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.food {
    font-size: 2rem;
    background-color: var(--primary-color-200);
    border-radius: .25rem;
    width: 2vmin;
    height: 2vmin;
}

