/* 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 */
/* Hacemos flex y colum, para posicionar uno debajo de otro en la versión movil */
section#DisenoWebGrafico {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Damos un tamaño a cada ariticle */
section#DisenoWebGrafico>article {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 23rem;
    height: 30rem;
    margin: 1rem;
}

/* damos el tamaño al contenedor que contiene la imagen */
section#DisenoWebGrafico>article>div {
    /* border: 1px solid blue; */
    width: 23rem;
    height: 30rem;
}

/* la imagen la posicionamos al 100% del contenedor padre */
section#DisenoWebGrafico>article>div>a>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Damos un estilo al h3 y lo posiconamos delante de la imagen */
section#DisenoWebGrafico>article>h3 {
    color: rgb(107, 162, 216);
    position: absolute;
    margin-top: 15rem;
    margin-left: 1rem;
    font-size: 2rem;
}

/* 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 */
    /* Cambiamos la direccion de los contenedores */
    section#DisenoWebGrafico {
        flex-direction: row;
        justify-content: center;
    }

    /* Cambiamos el tamaño de los contenedores para version tablet/web */
    section#DisenoWebGrafico>article {
        width: 48vw;
        height: 40rem;
        margin: 0rem;
    }

    /* Cambiamos el tamaño de los contenedores para version tablet/web */
    section#DisenoWebGrafico>article>div {
        width: 48vw;
        height: 40rem;
    }

    /* Damos un nuevo estilo al h3 */
    section#DisenoWebGrafico>article>h3 {
        margin-top: 20rem;
        font-size: 3rem;
    }

    /* Creamos la animación para el contendor de Diseño Gráfico */
    article#DisenoGrafico {
        -webkit-animation: roll-in-left 0.6s ease-out both;
        animation: roll-in-left 0.6s ease-out both;
    }

    @-webkit-keyframes roll-in-left {
        0% {
            -webkit-transform: translateX(-800px) rotate(-540deg);
            transform: translateX(-800px) rotate(-540deg);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
            opacity: 1;
        }
    }

    @keyframes roll-in-left {
        0% {
            -webkit-transform: translateX(-800px) rotate(-540deg);
            transform: translateX(-800px) rotate(-540deg);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
            opacity: 1;
        }
    }

    /* Creamos la animación para el contendor de Diseño web */
    article#DisenoWeb {
        -webkit-animation: roll-in-right 0.6s ease-out both;
        animation: roll-in-right 0.6s ease-out both;
    }

    @-webkit-keyframes roll-in-right {
        0% {
            -webkit-transform: translateX(800px) rotate(540deg);
            transform: translateX(800px) rotate(540deg);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
            opacity: 1;
        }
    }

    @keyframes roll-in-right {
        0% {
            -webkit-transform: translateX(800px) rotate(540deg);
            transform: translateX(800px) rotate(540deg);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
            opacity: 1;
        }
    }
}

@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;
    }

    /* 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;
    }
}