/* Insertamos la fuente que vamos a utilizar en nuestro proyecto */
@font-face {
    font-family: cabin;
    src: url('../Cabin/static/Cabin/Cabin-Regular.ttf');
}

/* insertamos la tipografía y el color de fondo a nuestra página */
body {
    margin: 0;
    padding: 0;
    background-color: white;
    font-family: cabin;
}

/* HEADER */
/* en la cabecera le damos un alto y un ancho, sin color y lo hemos flex para se posicionene a los lados los elementos */
header {
    width: 97vw;
    margin-top: -0.5rem;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ocultamos el menu para web */
nav#menuWeb {
    display: none;
}

/* El menu de hamburguesa lo hacemos flex, para poderlo poner en columna y le damos un estilo */
div#menuHamburguesa {
    width: 2.2rem;
    height: 1.5rem;
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
}

/* las barritas que componen el menu de hamburguesa */
span {
    background-color: black;
    width: 2.2rem;
    height: .1rem;
    display: block;
    border-radius: 10px;
    transition: all .4s;
}

/* Lo que desplegamos al seleccionar el menu de hamburguesa,  */
ul {
    display: none;
    padding: 0;
    list-style: none;
    background-color: rgb(100, 146, 225);
    height: 100vh;
    margin: 0;
}

/* Al pasar el raton por encima de la lista, aparezca que ese elemnto se puede seleccionar */
li {
    cursor: pointer;
    padding: 1rem;
}

/* Para que cambie el fondo de color al pasar el cursos por encima y haya un transiccion de 0.4segundos */
li:hover {
    background-color: white;
    transition: all .4s;
}

/* Al tener el fondo blanco, cambiar las letras a color azul, para que aprecie mejor con el fondo */
li:hover>a {
    color: rgb(100, 146, 225);
    transition: all .4s;
}

/* le damos un estilo a los enlaces que estan dentro de la lista */
a {
    text-decoration: none;
    color: black;
    margin-left: 2rem;
    letter-spacing: 0.5rem;
    font-size: 1.3rem;
}

/* Corresponde con transiccion de la primera barra del menu de hamburguesa */
.primera {
    transform: translateY(.5rem) rotate(45deg);
    transition: all .4s;
}

/* Corresponde con transiccion de la segunda barra del menu de hamburguesa */
.segunda {
    opacity: 0;
    transition: all 0s;
}

/* Corresponde con transiccion de la tercera barra del menu de hamburguesa */
.tercera {
    transform: translateY(-.5rem) rotate(-45deg);
    transition: all .4s;
}

/* SECTION */
/* Justificamos el texto  y le damos un margen */
section#estudios {
    text-align: justify;
    margin: 1rem;
}

/* Damos un estilo a los h3 */
section#estudios>article>div>h3,
section#estudios>article>h3 {
    text-align: center;
    border-bottom: 1.5px solid rgb(100, 146, 225);
    color: rgb(177, 178, 181);
    font-size: 1.5rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

/* Ponemos el texto en cursiva */
section#estudios>article>div>p,
section#estudios>article>p {
    font-style: italic;
}

/* ocultamos los h4 */
h4 {
    display: none;
}

/* FOOTER */

/* Ponemos un color de fondo, que ocupe todo el ancho de la pantalla. */
footer {
    background-color: rgb(100, 146, 225);
}

/* Damos un color de al texto, junto con una sombra y le damos espacios */
footer>h2 {
    color: white;
    text-align: center;
    text-shadow: 3px 3px rgb(137, 144, 152);
    margin-top: 0rem;
    margin-bottom: 0rem;
    padding: 0.5rem;
}

/* Hacemos flex para poder posicionarlo uno debajo de otro y lo centramos */
footer>div {

    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hacemos Flex, para poder posicinar las imagenes al lado del texto. 
Damos un alto y un ancho ya los contenedores */

footer>div>div {
    display: flex;
    align-items: center;
    margin-top: 1rem;
    width: 21rem;
    height: 2rem;
}

/* Damos un tamaño a las imagenes */

div>div:nth-child(1)>img {
    width: 2rem;
}

/* Damos un tamaño a la letra de los enlaces */
div>a {

    font-size: 0.7rem;
    margin-left: 5px;
}

/* Damos un tamaño y un color al párrafo del final */
footer>p {
    color: white;
    margin-left: 1rem;
    font-size: 0.5rem;
    margin-top: 2rem;
}

@media(min-width: 750px) {

    /* NAV TABLET*/
    /* Dashabilitamos el menu de hamburguesa */
    diV#menuHamburguesa {
        display: none;
    }

    /* Oculamos las opciones del menu desplebable versión movil, para la versión table y web */
    ul#opcionesMenu {
        display: none !important;
    }

    /* dashabilitamos el logo del menu de hamburguesa */
    div#Logo {
        display: none;
    }

    /* Activamos el Menu Web */
    nav#menuWeb {
        display: flex;
    }

    /* Hacemos flex y colum, para poder poner un div debajo de otro */
    nav#menuWeb {
        display: flex;
        flex-direction: column;
    }

    /* Para el primer div del nav, lo hacemos flex para poder poner los logos uno a cada lado */
    nav#menuWeb>div:first-of-type {
        margin: 0.3rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.7rem;
    }

    /* Para quitar el margen de arriba de los logos */
    nav#menuWeb>div:first-of-type>h1 {
        margin: 0.5rem;
    }

    /* Ponemos un color de fondo en el segundo div, y lo haccemos flex, para que se posicionen uno al lado del otro */
    nav#menuWeb>div:last-of-type {
        background-color: rgb(100, 146, 225);
        margin-top: 0;
        display: flex;
        justify-content: center;
        padding: 0;
        margin-bottom: 0;
    }

    /* Damos un margen a cada p, que coniene los enlaces de la barra de navegcion, para separalos entre sí */
    nav#menuWeb>div:last-of-type>p {
        margin: 0.5rem;
    }

    /* A los enlaces le quitamos la barra de decoración,y ponemos un color. */
    nav#menuWeb>div:last-of-type>p>a {
        text-decoration: none;
        color: black;
        font-size: 0.5rem;
    }

    /* Al pasar por los enlaces, el color de dichos, cambia a color negro */
    nav#menuWeb>div:last-of-type>p>a:hover {
        color: white;
    }

    /* SECTION */
    /* Hacemos flex al padre, para posicionar un articulo al lado del otro en la versión tablet */
    section#estudios {
        display: flex;
    }

    /* damos un tamaño a cada article,  */
    section#estudios>article {
        width: 50vw;
    }

    /* damos espacio al texto */
    section#estudios>article>div:first-child {
        padding: 1rem;
    }

    /* quitamos el estilo del borde de abajo y damos un tamaño mayor al h3 */
    section#estudios>article>div:first-child>h3 {
        border-bottom: none;
        font-size: 3rem;

    }

    /* damos un esapcio al texto */
    section#estudios>article>div:last-of-type {
        /* border: 1px solid blue; */
        padding: 1rem;
    }

    /* quitamos el estilo del borde de abajo y damos margen arriba y un tamaño mayor del texto */
    section#estudios>article>div:last-of-type>h3 {
        border-bottom: none;
        margin-bottom: 7rem;
        font-size: 3rem;

    }

    /* damos un tamaño al segundo articulo y damos un estilo al borde izquierdo del contenedor */
    section#estudios>article:last-of-type {
        border-left: 3px solid rgb(100, 146, 225);
        padding: 1rem;
        padding-top: -6rem;
    }

    /* Quitamos el boder de abajo del h3, damos un maor tamaño al texto y un borde de arriba */
    section#estudios>article:last-of-type>h3 {
        border-bottom: none;
        margin-bottom: 7rem;
        font-size: 3rem;
    }

    /* Hacemos flex al h4 para poderlo ver en la version table  y creamos una amimación*/
    h4 {
        display: flex;
        font-size: 10rem;
        color: rgb(100, 146, 225);
        -webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    @-webkit-keyframes text-pop-up-top {
        0% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            text-shadow: none;
        }

        100% {
            /* Crea las sombras de debajo de los números */
            -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
        }
    }

    @keyframes text-pop-up-top {
        0% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            text-shadow: none;
        }

        100% {
            -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
        }
    }


    /* Damos un estilo y posión a cada h4 */
    h4.n2 {
        margin-left: 10rem;
        margin-top: 10rem;
        margin-bottom: 15rem;
        text-shadow: 4px 4px rgb(218, 220, 224)
    }

    /* Damos un estilo y posión a cada h4 */
    h4.n1 {
        margin-top: 3rem;
        margin-left: -1rem;
        text-shadow: 4px 4px rgb(218, 220, 224)
    }

    /* Damos un estilo y posión a cada h4 */
    h4.n3 {
        margin-bottom: 0rem;
        margin-top: 5rem;
        margin-left: -1rem;
        text-shadow: 4px 4px rgb(218, 220, 224)
    }
}

@media(min-width: 1100px) {

    /* NAV  WEB*/
    /* Damos un tamaño mas grande a los logos */
    nav#menuWeb>div:first-of-type {
        font-size: 1rem;
    }

    /* damos un mayor tamaño al fondo azul de los enlaces */
    nav#menuWeb>div:last-of-type>p {
        margin: 1.2rem;
    }

    /* Damos un mayor tamaño a los enlaces */
    nav#menuWeb>div:last-of-type>p>a {
        font-size: 1rem;
    }

    /* SECTION */
    /* A los h3 modificamos su posición en la version web */
    section#estudios>article>div:first-child>h3 {
        /* border: 1px solid red; */
        margin-bottom: 2rem;
    }

    section#estudios>article>div:last-of-type>h3 {
        margin-bottom: 5rem;
    }

    section#estudios>article:last-of-type>h3 {
        /* border: 1px solid black; */
        margin-bottom: 3rem;
    }

    /* al número 01 y 03, le damos otro margen para la versión web */
    h4.n1,
    h4.n3 {
        margin-left: 4rem;
    }

    /* FOOTER */
    /* Hacemos row, para que se posionenen uno al lado del otro y lo justificamos al centro */
    footer>div {
        margin-top: 1.5rem;
        flex-direction: row;
        justify-content: center;
    }

    /* Damos un margen a cada contenedor */
    footer>div>div {
        margin: 0.5rem;
    }
}