/* 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 a la seccion flex y column para posicionar los elemento unos debajo de otros y lo justificamos al centro */
section#sobreMi {
    display: flex;
    flex-direction: column;
    justify-content: center;

}

/* al primer articulo le damos un margen y lo justificamos */
section#sobreMi>article#sobreMi1 {
    margin: 1rem;
    justify-content: center;
    align-items: center;
}

/* Ocultamos la imágen */
section#sobreMi>article#sobreMi1>div>img {
    display: none;
}

/* le damos un estilo al h3 */
section#sobreMi>article#sobreMi1>div>h3 {
    text-align: center;
    font-size: 2rem;
    letter-spacing: 2px;
    color: rgb(100, 146, 225);
    text-shadow: 3px 3px rgb(137, 144, 152);
}

/* Ponemos las p en cursiv */
section#sobreMi>article#sobreMi1>div:last-of-type {
    font-style: italic;
}

/* Le damos un estilo al segundo contenedor, y lo hacemos flex para que se posione uno debajo del otro */
section#sobreMi>article#sobreMi2 {
    background-color: rgb(245, 245, 241);
    height: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

section#sobreMi>article#sobreMi2>div:first-of-type,
section#sobreMi>article#sobreMi2>div:last-of-type {
    height: 7.5rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* A los conteneodres de las imagenes le damos un alto y un ancho */
section#sobreMi>article#sobreMi2>div:first-of-type>div,
section#sobreMi>article#sobreMi2>div:last-of-type>div {
    width: 4rem;
    height: 4rem;
}

/* Ponemos las imégenes al 100% del contendor de su padre */
section#sobreMi>article#sobreMi2>div:first-of-type>div>img,
section#sobreMi>article#sobreMi2>div:last-of-type>div>img {
    width: 100%;
    height: 100%;
}

/* 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 contiene los enlaces de la barra de navegación, 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 el tamaño del h3 en la versión tablet */
    section#sobreMi>article#sobreMi1>div>h3 {
        font-size: 3rem;
    }
}

@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 */
    /* Le damos un margen al primer altículo, un estilo, y lo hacemos flex, para posionar un texto al lado del otro */
    section#sobreMi>article#sobreMi1 {
        margin: 1rem;
        display: flex;
        align-items: center;
        background-color: white;
    }

    /* Al contendor que contiene la imagen, de damos unas dmensiones */
    section#sobreMi>article#sobreMi1>div:first-of-type {
        width: 50rem;
        height: 20rem;
    }

    /* La imagen la poenmos al 100% del contenedor de su padre y sin distorsión */
    section#sobreMi>article#sobreMi1>div>img {
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Ocultamos el h3 en la versión web */
    section#sobreMi>article#sobreMi1>div>h3 {
        display: none
    }

    /* Camabiamos el texto a color blanco y damos un margen */
    section#sobreMi>article#sobreMi1>div:last-of-type {
        font-style: italic;
        color: black;
        margin: 1rem;
    }

    /* Cambiamos la altura del segundo artículo y lo centramos y le damos otro color */
    section#sobreMi>article#sobreMi2 {

        background-color: white;
        flex-direction: row;
        height: 10rem;
        align-items: center;
    }

    /* damos una anchura a cada contenedor para que se posiconen uno al lado del otro */
    section#sobreMi>article#sobreMi2>div:first-of-type,
    section#sobreMi>article#sobreMi2>div:last-of-type {
        width: 50vw;
    }

    /* cambiamos el tamaño de los contenedores que contienen las imágenes */
    section#sobreMi>article#sobreMi2>div:first-of-type>div,
    section#sobreMi>article#sobreMi2>div:last-of-type>div {
        width: 5rem;
        height: 5rem;
    }

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