/*colores escritorio*/
:root{
    --bgbackground: black;
    --letrascolor: #3366cc;
    --letrascolorhover: #1e9aff;
    --mainbackground: white;
    --divletras: white;
    --links: orange;
    --blacklinks: black;
    --bordeboton: blue;
    --fondomaindiv: #3B3B3B;
    --fondodiv: #6D5050;
}

/*colores celular y/o tablets*/
:root{
    --bgbackgroundce: #1e2c4d; /*#1e2c4d*/
    --letrascolorce: #3366cc;
    --letrascolorhoverce: #1e9aff;
    --mainbackgroundce: #dfedfa;
    --divletrasce: #dfedfa; /*#1e2c4d*/
    --linksce: #3366cc;
    --blacklinksce: black;
    --bordebotonce: blue;
    --fondomaindivce: #2a467e; /*#2e509f*/
    --fondodivce: #2e509f; /* #9eccf2*/
    --bordeabajo: #f1f7fd;
}


body{
    background-color: white;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    border: none;
}

/* Menú de navegación */

.navegacion{
    background-color: var(--bgbackgroundce);
    border-top: 1px solid var(--bgbackgroundce);
}
header{
    margin-top: 0px;
    padding: 0px;
}

a:active{
    color: var(--letrascolorhoverce);
}
.navegacion ul{
    list-style: none;
}

.menu li{
    display: inline-block;
    position: relative;
}
.menu li a{
    display: block;
    color: var(--letrascolorce);
    text-decoration: none;
}
.menu li a:hover{
    color: var(--letrascolorhoverce);
    transition: all .3s;
}
.submenu{
    position: absolute;
    background-color: #333333;
    display: none;
    text-align: center;
}

.submenu li a .submenu{
    display: block;
    color: #fff;
    text-decoration: none;
}

.menu li:hover .submenu{
    display: block;
    color: #fff;
    text-decoration: none;
}
/* Fin menu de navegación*/

/* Estilo por defecto de las pagina INICIO*/
main{
    background-color: var(--mainbackgroundce);
    color: var(--divletrasce);
}
main section div{
    margin: auto;
}

main section{
    margin: auto;
    background-color: var(--fondomaindivce);
    text-align: center;
}

main section div{
    background-color: var(--fondodivce);
    border-bottom: 3px solid var(--bordeabajo);
}
main section div a{
    color: var(--linksce);
}
/* Estilo por defecto de las pagina FIN*/
/*Footer inicio*/

footer p{
    color: var(--letrascolorce);
    text-align: center;
}
footer img{
    display: flex;
    margin-left: auto;
    margin-right: auto;
}
footer{
    background-color: var(--bgbackgroundce);
}
/*Footer Fin*/
/*
header nav a{
    margin-right: 15px;
    padding: 10px 0px;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    font-family: sans-serif;
    text-decoration: inherit;
    text-align: center;
}
*/

/**Escritorio**/
@media (min-width: 991px) {
    /* Menú de navegación */
    .navegacion{
        height: 12vh;
        padding: 15px 0px 0px 0px;
        font-size: 20px;
    }

    header nav img{
        height: 40px;
        margin-right: 70%;
    }
    .menu li a{
        padding: 15px 20px;
    }
    .submenu{
        width: 120%;
    }
    
    .submenu li a .submenu{
        padding: 15px;
    }
    
    .menu li:hover .submenu{
        padding: 15px;
    }
    /* Fin menú de navegación */
    /* Estilo por defecto de las pagina INICIO*/
    main section{
        width: 800px;
        padding: 25px;
    }
    
    main section div{
        margin-top: 10px;
        padding: 10px;
        width: 400px;
    }
    
    footer img{
        height: 30px;
    }
    footer{
        padding: 20px;
    }
    /* Estilo por defecto de las pagina FIN*/

    /*ESTILOS INICIO*/

    /* Menú de navegación */

    .navegacion{
        background-color: var(--bgbackground);
        border-top: 1px solid var(--bgbackground);
    }

    a:active{
        color: var(--letrascolorhover);
    }
    .menu li a{
        color: var(--letrascolor);
    }
    .menu li a:hover{
        color: var(--letrascolorhover);
    }
    /* Fin menu de navegación*/

    /* Estilo por defecto de las pagina INICIO*/
    main{
        background-color: var(--mainbackground);
        color: var(--divletras);
    }
    main section{
        background-color: var(--fondomaindiv);
    }

    main section div{
        background-color:var(--fondodiv);
        border-bottom: 3px solid var(--mainbackground);
    }
    /* Estilo por defecto de las pagina FIN*/
    /*Footer inicio*/

    footer p{
        color: var(--letrascolor);
    }

    footer{
        background-color: var(--bgbackground);
    }
    /*Footer fin*/
}

/**Celular**/
@media (max-width: 767px) {
    /* Menú de navegación */
    .navegacion{
        height: 10vh;
        text-align: center;
    }
    .navegacion a{
        font-size: 15px;
    }
    header nav img{
        display: none;
    }

    .menu li a{
        padding: 10px 15px;
    }
    .submenu{
        width: 120%;
    }
    
    .submenu li a .submenu{
        padding: 15px;
    }
    
    .menu li:hover .submenu{
        display: block;
        padding: 15px;
    }
    /* Fin menú de navegación */
    /* Estilo por defecto de las pagina INICIO*/
    main section{
        width: 300px;
        margin: auto;
        padding: 10px;
    }
    
    main section div{
        margin-top: 10px;
        padding: 5px;
        width: 250px;
    }
    
    footer p{
        text-align: center;
    }
    footer img{
        height: 30px;
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }
    footer{
        padding: 20px;
    }
    /* Estilo por defecto de las pagina FIN*/
    iframe{
        width: 100%;
    }
}

/**Tablet**/

@media (min-width: 768px) and (max-width: 990px) {
    /* Menú de navegación */
    .navegacion{
        height: 100px;
    }
    .navegacion a{
        font-size: 20px;
    }
    header nav img{
        height: 50px;
        margin-right: 40%
    }
    .menu li a{
        padding: 15px 20px;
    }
    .submenu{
        width: 120%;
    }
    
    .submenu li a{
        padding: 15px;
    }
    
    .menu li:hover .submenu{
        display: block;
        padding: 15px;
    }
    /* Fin menú de navegación */
    /* Estilo por defecto de las pagina INICIO*/
    main section{
        width: 500px;
        margin: auto;
        padding: 10px;
    }
    
    main section div{
        margin-top: 10px;
        padding: 5px;
        width: 250px;
    }
    
    footer p{
        text-align: center;
    }
    footer img{
        height: 30px;
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }
    footer{
        padding: 20px;
    }
    /* Estilo por defecto de las pagina FIN*/
    iframe{
        width: 100%;
    }
}