body {
    font-family: Arial;
    text-align: center;
    background-color: rgb(153, 153, 255);
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 250px);
    gap: 35px;
    justify-content: center;
}

.cell {
    width: 250px;
    height: 200px;
    background-color: lightblue;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

button {
    width: 100px;
    height: 50px;
    background-color: rgb(119, 20, 20);
    border-radius: 6px;
    text-align: center;
    text-size-adjust: 15px;
    color: white;
    cursor: pointer;
  
}
  
@media (max-width: 1080px){

    body {
         background-color: #1a1a2e; /* oscuro tipo gamer */
         color: white;
    }
  
    h1 {
        font-size: 1.5em;
    }

    .grid {
        grid-template-columns: repeat(3, 1fr); /* flexible */
        grid-template-rows: repeat(3, 1fr);
        height: 70vh; /* el grid ocupa casi toda la pantalla */
    }

    .cell {
        width: 100%;
        height: 100%;
        background-color: #16213e;
        border: 2px solid #0f3460;
        font-size: 1.5em;
    }

    #respuesta{
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    #boton{
        width: 100%;
        height: 30%;
        background-color: #e94560;
        font-size: 1em;
    }

    #boton button{
        text-align: center;

    }
}