/* estilo para div */

/*tipo de letra bajado de google fonts*/

@import url('https://fonts.googleapis.com/css2?family=Comforter+Brush&family=Concert+One&family=Corinthia:wght@400;700&family=Dancing+Script:wght@400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* fuentes de letra
font-family: 'Comforter Brush', cursive;
font-family: 'Concert One', cursive;
font-family: 'Corinthia', cursive;
font-family: 'Dancing Script', cursive;
font-family: 'Roboto', sans-serif;
font-family: 'Exo 2', sans-serif;
*/


.enlace {
    text-align: left;
    line-height: 25px;
}

.enlace p {
    font-weight: 700;
    text-align: left;
    color: #078618;
    font-size: 20px;
}

p {
    text-align: center;
}

html,
body {
    margin: 0px;
    padding: 0px;
    background-color: white;
    font-size: 15px;
    font-family: 'Exo 2', sans-serif;
}

.contenedor {
  /*   width: auto; */
    height: 95%;
    margin: 0px 20px 10px 20px;
    background-color: white;
    text-align: center;
    display: flex;
    flex-direction: row;
    gap: 1%;
    justify-content: space-between;
}

h1 {
    text-align: center;
    font-size: 2rem;
    color: #0c0c0c;
}

/* h2 {
    font-size: 1rem;
    color: #585656;
    text-align: center;
}

h3 {
    color: #3b1cc5;
    background-color: rgb(219, 214, 206);
    border-radius: 10px;
    margin-right: 5%;
    margin-left: 5%;
    padding: 10px;
}

h4 {
    font-size: 1.5rem;
    color: #081dd8;
    text-align: center;
} */

.caja1,
.caja2,
.caja3,
.caja4,
.caja5,
.caja6 {
    background-color: whitesmoke;
    width: 19%;
    color: black;
    border: 1px solid #000;
    border-radius: 5px;
    box-sizing: border-box;
}






@media screen and (min-width: 1680px) {
    .contenedor {
        width: 98%;
        box-sizing: border-box;    
    }
}

@media screen and (min-width:768px) and (max-width: 1680px) {

    body,
    html {
        background-color: white;
    }
}

@media screen and (max-width:768px) {
    h1 {
        font-size: 2rem;
    }

    .contenedor {
        flex-direction: column;
        width: 94%;
    }

    .caja1,
    .caja2,
    .caja3,
    .caja4,
    .caja5,
    .caja6 {
        background-color: rgb(44, 138, 201);
        width: 80%;
    }

}



@media screen and (max-width:500px) {
    h1 {
        font-size: 1.25rem;
    }

    .caja1,
    .caja2,
    .caja3,
    .caja4,
    .caja5,
    .caja6 {
        background-color: cyan;
        width: 80%;
    }

}