:root {
    --azulClaro: #567de7;
    --azulOscuro: #364f92;
    --violetaOscuro: #22104d; 
    --grisClaro: #B3B3B4; /* degradado fondo, aside */
    --grisMedio: #333333; /* linea footer */
    --grisOscuro: #3b3b3b;
    --blanco: #ffffff; /* main, letras */
    --nieve: snow;

}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    /* necesario para el degradado html */
    height: 100%;
}

body{
    max-width: 1600px;
    width: 99%;
    margin: 0 auto;
    background: radial-gradient(circle, var(--grisOscuro), var(--blanco));
}

/* Estética */
#recreo, header, #asideInfo, main{
    padding: 5px;
}

/* Logo, Menú y Loggin */
header{
    border-radius: 10px 10px 0 0;
    background: radial-gradient(circle, var(--azulClaro), var(--violetaOscuro));
    color: var(--blanco);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;

    #menuIconos{
        ul{
            list-style-type: none;
            li{
                display: inline-block;
                padding: 5px;
                a{
                    color: var(--blanco);
                    text-decoration: none;
                }
                transition: transform 0.3s, background-color 0.3s, border-radius 0.3s;
                &:hover{
                    transform: scale(1.3);
                    background-color: var(--grisOscuro);
                    border-radius: 5px;
                }
            }
        }
    }
}

/* barra horizontal debajo del header, para información y herramientas */
#asideInfo{
    background-color: var(--grisClaro);
    text-align: center;
}

/* contenido principal */
main{
    background-color: var(--nieve);
    border: 1px solid var(--grisClaro);
    padding: 10px;
}

footer{
    background: radial-gradient(circle, var(--azulOscuro), var(--violetaOscuro));
    color: var(--blanco);
}

#divFooterTexto{
    padding: 5px;
}

#derechosAutor{
    font-size: small;
}

#palabrasClave{
    font-size: small;
}

#divDecoInferior{
    background-color: var(--grisMedio);
    height: 10px;
}