/*
    El estilo de nuestra página tendrá 3 tamaños diferentes para los diferentes dispositivos, un tamaño
    para ordenador (hasta 2000px), para tablet (de 601 hasta 2000px) y para móvil (hasta 600px). 
*/


@media only screen and (max-width: 5000px) {

    /*
        Primero voy a dar formato al fondo de la página y al color de la letra que iran en conjunto con 
        los colores del logotipo. 
    */

    body {
        background-color: black;
        color: burlywood;
        margin: 0px;
        padding: 0px;
    }
    
    /*  
        Para comenzar nuestro estilo vamos a aplicar formato a nuestra cabecera principal donde tendremos el logo, 
        el nombre de la página y a la derecha tendremos un pequeño buscador vacio. Para la disposición de nuestras 
        "cajas", hemos utilizado el valor flex para el atributo display. Este valor nos ayuda a organizas nuestros
        <div> de forma mas sencilla ya que tiene propiedades y usarlas es bastante sencillo. 
    */

    .logogeneral {
        display: flex;
        background-color: black;
        height: 150px;
        width: 1500px;
        justify-content: space-between;
        flex-wrap: wrap;
        position: fixed;
        z-index: 1;
    }

    .logoindividual {
        background-color: black;
        color: burlywood;
    }

    #tamañonombre {
        width: 300px;
        font-size: 50px;
        text-decoration: underline;
        text-align: end;
        padding-top: 40px;
    }

    #tamañoimagen {
        height: 145px;
    }


    /*  
        Teniendo ya nuestra cabecera, vamos con el menú de navegación. Lo hemos hecho también con la propiedad flex
        y le hemos dado una alineación en columnas para que no esté a la misma altura que nuestra cabecera y para que
        se diferencie. 

    */

    .menugeneral {
        display: flex;
        background-color: black;
        height: 900px;
        width: 150px;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        position: relative;
        top: 150px;
        float: left;
    }

    .menuindividual {
        background-color: black;
        width: 148px;
        border: 2px solid burlywood ;
        color: burlywood;
        text-align: center;
        position: sticky;
        line-height: 100px;
        font-size: 20px;
    }

    /*  
        Aplicamos unos topes al menú de navegación ya que estos nos mantendrán 
        nuestros botones dentro de nuestro "div padre" cuando hagamos scroll. 
    */


    .tope1 {
        top: 150px;
    }
    .tope2 {
        top: 250px;
    }
    .tope3 {
        top: 350px;
    }
    .tope4 {
        top: 450px;
    }

    /*  
        Ahora vamos a dar formato a los enlaces del menú, para que cuando pinchemos 
        en un enlace actuen de la misma forma, queremos que no cambie de formato en 
        ningún momento. Para ello hemos utilizado la pseudoclase hover, que se utiliza
        para dar formato cuando pasamos por encima el cursor, la pseudoclase link, que 
        se utiliza para el formato de un enlace no visitado, la pseudoclase visited, 
        para cuando un enlace se ha visitado, y la pseudoclase active, cuando pinchas un
        enlace. 
    */

    .enlace:hover {
        text-decoration: none;
        color: burlywood;
    }
    .enlace:link {
        text-decoration: none;
        color: burlywood;
    }
    .enlace:visited {
        text-decoration: none;
        color: burlywood;
    }
    .enlace:active {
        text-decoration: none;
        color: burlywood;
    }

    /*
        Vamos a aplicar formato para nuestro catálogo de tipos de producto que tenemos en la página.
    */

    .ropageneral {
        background-color: black ;
        display: grid;
        grid-template-columns: auto auto auto;
        height: 1000px;
        width: 1300px;
        margin-left: 150px;
        align-content: center;
    }

    .ropaindividual {
        height: 300px;
        width: 300px;
        background-color: black;
        margin-top: 150px;
        margin-left: 100px;
        color: burlywood;
        text-align: center;
        font-size: 25px;
    }

    .menuimagen {
        height: 250px;
        width: 300px;
    }
}

/*
    Para tablets
*/

@media only screen and (min-width: 601px) and (max-width: 900px ) {

    /*
        Formato de la cabecera para tablets
    */

    .logogeneral {
        display: flex;
        background-color: black;
        height: 120px;
        width: 900px;
        justify-content: space-between;
        flex-wrap: wrap;
        position: fixed;
        z-index: 1;
    }

    .logoindividual {
        background-color: black;
        color: burlywood;
    }

    #tamañonombre {
        width: 150px;
        height: 50px;
        font-size: 20px;
        text-decoration: underline;
        text-align: end;
        padding-top: 40px;
    }

    #tamañoimagen {
        height: 100px;
    }

    /*
        Formato del menú navegación para tablets
    */

    .menugeneral {
        display: flex;
        background-color: black;
        height: 900px;
        width: 100px;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        position: relative;
        top: 120px;
        float: left;
    }

    .menuindividual {
        background-color: black;
        width: 96px;
        border: 2px solid burlywood ;
        color: burlywood;
        text-align: center;
        position: sticky;
        line-height: 100px;
        font-size: 13px;
    }

    /*  
       Aplicamos los topes al tamaño nuevo de la página
    */


    .tope1 {
        top: 120px;
    }
    .tope2 {
        top: 220px;
    }
    .tope3 {
        top: 320px;
    }
    .tope4 {
        top: 420px;
    }

    /*
        Aplicamos un tamaño adecuado para el menú de los productos. 
    */

    .ropageneral {
        background-color: black ;
        display: grid;
        grid-template-columns: auto auto ;
        height: 600px;
        width: 600px;
        margin-left: 150px;
        align-content: center;
    }

    .ropaindividual {
        height: 100px;
        width: 100px;
        background-color: black;
        margin-top: 40px;
        margin-left: 100px;
        color: burlywood;
        text-align: center;
        font-size: 15px;
    }

    .menuimagen {
        height: 100px;
        width: 100px;
    }
}


/*
    Para Móviles
*/

@media only screen and (max-width: 600px) {

    /*
        Formato de la cabecera para moviles
    */

    .logogeneral {
        display: flex;
        background-color: black;
        height: 80px;
        width: 900px;
        justify-content: flex-start;
        flex-wrap: wrap;
        position: fixed;
        z-index: 1;
    }

    .logoindividual {
        background-color: black;
        color: burlywood;
    }

    #tamañonombre {
        width: 150px;
        height: 20px;
        font-size: 13px;
        text-decoration: underline;
        text-align: start;
        padding-top: 40px;
        padding-left: 150px;
    }

    #tamañoimagen {
        height: 75px;
    }

    /*
        Formato del menú navegación para moviles
    */

    .menugeneral {
        display: flex;
        background-color: black;
        height: 900px;
        width: 75px;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        position: relative;
        top: 80px;
        float: left;
    }

    .menuindividual {
        background-color: black;
        width: 71px;
        border: 2px solid burlywood ;
        color: burlywood;
        text-align: center;
        position: sticky;
        line-height: 100px;
        font-size: 10px;
    }

    /*  
       Aplicamos los topes al tamaño nuevo de la página
    */


    .tope1 {
        top: 80px;
    }
    .tope2 {
        top: 180px;
    }
    .tope3 {
        top: 280px;
    }
    .tope4 {
        top: 380px;
    }

    /*
        Aplicamos un tamaño adecuado para el menú de los productos. 
    */

    .ropageneral {
        background-color: black ;
        display: grid;
        grid-template-columns: auto auto ;
        height: 300px;
        width: 300px;
        margin-left: 10px;
        align-content: center;
        padding-top: 100px;
    }

    .ropaindividual {
        height: 75px;
        width: 75px;
        background-color: black;
        margin-top: 60px;
        margin-left: 100px;
        color: burlywood;
        text-align: center;
        font-size: 13px;
    }

    .menuimagen {
        height: 75px;
        width: 75px;
    }
}