html{
    font-size: 62.5%; /*Significa que vale 10px*/
    background-color: rgb(230, 237, 253); 
}

*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box; /*Para que las cajas mantengan las dimensiones que quiero*/
}

body {
    text-align: center;
    font-size: 3rem;
    font-family:'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
}

nav{
    display: flex; /* Para usar justify-content */
    justify-content:space-between; /*Separa elementos para alinearlos diferente*/
    background: linear-gradient(225deg, rgb(255, 247, 255), rgb(220, 208, 228));
    height: 6rem;
    padding-bottom: 6rem;
    border-bottom: .5rem double rgb(0, 0, 0);
}

ul{ /* Elementos del navbar y footer*/
    list-style-type: none; /*Para que no tenga los puntitos predeterminados*/
    display: flex; /*para que los Li se pongan en fila */
}

ul li{
    margin: 1rem 2rem 1rem 1rem; /*Margen entre los enlaces*/
}

ul li a:active{ /*Nav y footer: Aparece una sombra cuando clickeas*/
    box-shadow: 0px 0px 5px rgb(209, 116, 233);
}

ul li a:hover{ /*Nav y footer: Cambia de color cuando pasas el puntero por arriba*/
    color: rgb(243, 214, 171);
    transition-property: all; /*se aplica a todas las propiedades (color, en este caso)*/
    transition-duration: .3s; /*dura 0.3 segundos*/
    transition-timing-function: ease-in; /*empieza lento y termina normal*/
    /*y no tiene delay*/
}

a{ /* Enlaces a otras páginas*/
    text-decoration: none; /*Para que no tenga el subrayado predeterminado*/
    font-size: 2rem;
    color: rgb(0, 0, 0);
}

.jumbotron{
    background-image: url("/Img/bg.jpg");
    background-size: cover;
    background-position: center;
    height: 80vh;
}

.titulo{
    margin: .5rem;
    padding: 1rem;
    letter-spacing: 20px; /*Espaciado del título entre letras*/
}

.animate__animated.animate__fadeInUp{
    --animate-duration: 2.5s;
}

.container{ /* Contenedor de las boxs */
    height: 75vh;
    justify-content: space-around; /*Alinea las cajitas EJE HORIZONTAL*/
    align-items: center; /*Alinea las cajitas EJE VERTICAL*/
    display: grid;
    grid-template-areas: "uno dos tres cuatro";            
    grid-gap: 5rem; /*Separa las cajitas*/
}

.caja{ /* Corresponde a las 4 cajitas centrales*/
    background: linear-gradient(225deg, rgb(255, 247, 255), rgb(220, 208, 228));
    border-radius: 30%; /*Borde redondeado*/
    box-shadow: -5px 5px 11px #706a74, /*Doble sombreado*/
                5px -5px 11px #ffffff;
    width: 20rem;
    height: 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.caja:hover{ /* Se agranda cuando pasas el puntero por encima */
    width: 23rem;
    height: 23rem;
    transition: all 0.2s ease-in; /* Versión abreviada de la transición */
    /* Se aplica a todas las propiedades (width y height en este caso) */
    /* Dura 0.3 segundos, empieza lento y termina normal */
}

.box1{
    grid-area: uno;
}
.box2{
    grid-area: dos;
}
.box3{
    grid-area: tres;
}
.box4{
    grid-area: cuatro;
}

@media (min-width: 427px) and (max-width: 768px){ /* Vista para tablet*/
    .container{
        height: 100vh;
        grid-template-areas: "uno dos"
                             "tres cuatro";
    }
    .titulo{
        letter-spacing: 0px;
    }
}

@media screen and (max-width: 426px){ /* Vista para celulares*/
    body{
        font-size: 1.5rem;
    }
    nav{
        height: 5rem;
        padding: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    ul li{
        margin: .5rem;
    }
    a{
        font-size: 14px;
    
    }
    caja{
        width: 150px;
        height: 150px;
    }
    .container{
        height: 100%;
        grid-template-areas: "uno"
                             "dos"
                             "tres"
                             "cuatro";
        margin-top: 3rem;
    }
    .titulo{
        letter-spacing: 0px;
    }
    footer{
        height: 5rem;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    
}

.footer{
    /*background-color: rgb(89, 212, 142);*/
    background-color: #e6edfd;
    height: 6rem; /*Vale 60px*/
    display: flex; /* Pone los elementos en linea */
    justify-content: center;
}

i{ /* Es el Copy del Footer*/
    font-size: 2rem; /*20px*/
}