:root{  /*SELECTOR DE RAIZ*/

    --color1:#05AFF2;
    --color2:#F2F2F2;
}

*{/* EL FORMATEO*/

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

#contenedor{
    width: 80%;
    margin: 25px auto;
    border: 1px solid grey;
    padding: 5px; /* DISTANCIA INTERNA*/
    /*border-radius: 10px;*/
}

/* ETIQUETA SEMANTICA HEADER*/

header{
    height: 100px;
    background-color: var(--color1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px; /* DISTANCIA EXTERNA*/
}

header img{
    /*height: 100%;
    float: left;*/
    max-height: 100%;
}
header h3{
        color:var(--color2);
        padding-right: 10px;
        text-transform: uppercase; /*convertir en mayuscula*/
}

/* ETIQUETA SEMANTICA NAV*/

nav{
    margin: 10px;
    height: 100px;
   /* border: 1px solid blue;*/
}

nav ul{/* para colocar el menu uno al costado de otro display:flex*/
    display: flex;
    justify-content: right;
    list-style: none;/*quitamos los puntos*/
}


nav ul li{
    min-width: 120px;
    /*background-color: violet;*/
}

nav ul li a{
    text-decoration: none;
    background-color: black;
    color: white;
    padding: 5px 20px;
    /* NO SE COLOQUE UNO SOBRE OTRO */
    display: block;
}

/* PARA COLOCARLE QUE CUANDO PASEMOS EL MOUSE SE PRENDA DEL COLOR ELEGIDO*/
nav ul li a:hover{ 
    background-color: #434343;

}

nav ul li ul{
    display: flex;
    flex-direction: column; /*ESTO HACE QUE APAREZCA EN COLUMNA*/
    display:none;/*PARA QUE NO APAREZCA*/
}

nav ul li:hover>ul{
    display: block; /*PARA QUE APAREZCAN DENTRO DEL VIDEOS */
}

main{
    margin: 5px;
    padding: 5px;
    text-align: justify;
    display: flex;
    justify-content: space-around;
}

section{
    width:60%;
    padding: 5px;
}

article{
    margin:10px 5px;
}

article img{
    max-width: 90%;
    display: block;
    margin:10px auto;
    border-radius: 10px;
}


aside{
    width: 30%;
    padding: 5px;
    font-size: 1em;
}

aside img{
    max-width: 100%;
    display: block;
    margin:10px auto;
}

h4,h5{
    text-align: center;
    margin: 10px 0;
    padding: 5px;
    background-color: black;
    color: white;
    text-transform: uppercase;
}

p{
    padding: 10px 0;
}

article li {
    padding: 5px 10px;
}

footer{
    background-color: var(--color1);
    margin:5px;
    text-align: center;
    color: white;
    padding: 5px 0;
}

footer a{
    color: white;
}
footer p{
    padding: 2px 0;
}

footer i {
    font-size: 1.5em;
}

/*ESTILO PARA youtube.html*/
#content{
    width: 70%;
    margin: 20px auto;
    border: 1px solid grey;
}

#titulo{
    background-color: #434343;
    color: white;
    text-align: center;
    font-size: 1.5em;
    padding: 10px 0;
    margin: 10px;
}

#video-responsivo{
    padding: 10px;
    margin: 10px;
    border: 1px solid grey;
    position: relative;
    padding-bottom: 56.25%;/*relacion 9/16*/
    height: 0;
}

#video-responsivo iframe, #video-responsivo video{/*SIN PERDER SU DIMENSIÓN*/
   position: absolute;/*PARA QUE EL HIJO SE ACOMODE CON EL PADRE*/
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}