*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

/* Centrando nuestro juego */
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #e3f2fd;
}

/* Estilando al contenedor padre */
.wrapper{
    width: 100vmin;
    height: 90vmin;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden; /*Si algo se sale lo oculta*/
    background: #293447; 
    /* COLOR OPCIONAL #2934 */
}

/* Estilando al título */
.game-details{
    color: #b8c6dc;
    font-size: 1.2rem;
    font-weight: 500;
    padding: 20px 27px;

    /* PARA ESQUINAR LOS PUNTAJES */
    display: flex;
    justify-content: space-between;
}

.play-board{
    width: 100%;
    height: 100%;
    background-color: #212837;

    /* Creando una matrix de 30x30 para el movimiento de nuestro snake */
    display: grid;
    grid-template: repeat(30, 1fr)/repeat(30, 1fr);
}

/* Estilando la manzana */
.play-board .food{
    background-color: #ff003d;
}

.play-board .head{
    background-color: #2cd22e;
}