/* Estilos generales */
* {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #373B44;
    background: -webkit-linear-gradient(to right, #4286f4, #fff);
    background: linear-gradient(to right, #4286f4, #fff);
}

/* Encabezado */
header {
    font-size: 20px;
    text-align: center;
    margin: 20px 0 50px;
    color: white;
}

/* Pie de página */
footer {
    position: relative;
    margin-top: 30px;
    margin-bottom: 10px;
}

/* Margen superior */
.margen {
    margin-top: 50px;
}

/* Contenedor principal */
#contenedor {
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0.6em;
}

/* Cajas */
#caja0, #caja1, #caja3, #caja4 {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 5%;
    width: 12em;
    height: 300px;
    margin-bottom: 20px;
    border-radius: 20px;
}

#caja2 {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 5%;
    width: 17em;
    height: auto;
    margin-bottom: 20px;
    border-radius: 20px;
}

/* Colores de fondo */
#caja0 {
    background-color: black;
    color: azure;
}

#caja1 {
    background-color: grey;
    color: azure;
}

#caja2 {
    background-color: darkblue;
    color: azure;
}

#caja3 {
    background-color: #2ab2ea;
    color: azure;
}

#caja4 {
    background-color: skyblue;
    color: azure;
}

/* Media Query para pantallas menores de 1200px */
@media (max-width: 1200px) {
    #contenedor {
        grid-template-columns: 1fr; /* Cambiar a una sola columna */
    }
    
    #caja0, #caja1, #caja2, #caja3, #caja4 {
        width: 100%; /* Ocupar todo el ancho disponible */
        height: auto; /* Ajustar la altura automáticamente */
        order: 2;
    }

    footer {
        position: relative;
        margin-top: 30px;
        margin-bottom: 10px;
    }

    #caja2 {
        order: 1;
    }
}