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

/* SECCION MOODBOARD */
/* Hacemos al contenedo padre, flex y colum para posicionar un div debajo de otro y poder ajustarlo en el centro */
section#Moodboard {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Damos un tamaño de alto a cada div */
section#Moodboard>article {
    height: 30rem;
    margin: 0.5rem;
}

/* Poisionamos las imagenes al 100% y que no se distorsionen */
section#Moodboard>article>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 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 imágenes 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 imágenes */
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 MOODBOARD */
    /* Hacemos al contenedo padre grid y creamos las filas y las columnas que va a tener */
    section#Moodboard {
        display: grid;
        justify-content: center;
        grid-template-columns: [x0] 1fr [x1] 1fr [x2] 1fr [x3];
        grid-template-rows: [y0] 1fr [y1] 1fr [y2] 1fr [y3] 1fr [y4] 1fr [y5] 1fr [y6] 1fr [y7] 1fr [y8] 1fr [y9] 1fr [y10] 1fr [y11] 1fr [y12];
    }

    /* Posicionamos cada imagen */
    #i1 {
        grid-column: x0 / x1;

    }

    #i2 {
        grid-column: x1 / x2;

    }

    #i3 {
        grid-column: x2 / x3;

    }

    #i4 {
        grid-column: x0 / x2;
        grid-row: y1 / y2;
    }

    #i5 {
        grid-column: x2 / x3;
        grid-row: y1 / y2;
    }

    #i6 {
        grid-column: x0 / x3;
        grid-row: y2 / y3;
    }

    #i8 {
        grid-column: x0 / x3;
        grid-row: y3 / y4;
    }

    #i10 {
        grid-column: x0 / x1;
        grid-row: y4 / y6;
    }

    #i11 {
        grid-column: x1 / x2;
        grid-row: y4 / y5;
    }

    #i12 {
        grid-column: x1 / x2;
        grid-row: y5 / y6;
    }

    #i13 {
        grid-column: x2 / x3;
        grid-row: y4 / y6;
    }

    #i14 {
        grid-column: x0 / x1;
        grid-row: y6 / y7;
    }

    #i15 {
        grid-column: x1 / x3;
        grid-row: y6 / y7;
    }

    #i16 {
        grid-column: x0 / x1;
        grid-row: y7 / y8;
    }

    #i17 {
        grid-column: x1 / x2;
        grid-row: y7 / y8;
    }

    #i18 {
        grid-column: x2 / x3;
        grid-row: y7 / y8;
    }

    #i19 {
        grid-column: x0/ x3;
        grid-row: y8 / y9;
    }

    #i20 {
        grid-column: x1/ x2;
        grid-row: y9 / y11;
    }

    #i21 {
        grid-column: x0/ x1;
        grid-row: y9 / y10;
    }

    #i22 {
        grid-column: x2/ x3;
        grid-row: y10 / y11;
    }

    #i23 {
        grid-column: x0/ x1;
        grid-row: y10 / y11;
    }

    #i24 {
        grid-column: x2/ x3;
        grid-row: y9 / y10;
    }

    #i25 {
        grid-column: x0/ x3;
        grid-row: y11 / y12;
    }

    /* Poisionamos las imagenes al 100% y que no se distorsionen */
    section#Moodboard>div>img {
        object-fit: cover;
    }

}

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