/*
    CSS para el examen

    colores:

    fondo: #333333;
    fondo: cajas: #424242;
    linea: lightgray;
    boton: #007BFF;
    boton seleccionado: #0056b3;
*/

body {
    /* 1- color de fondo */
    background-color: #333333;
    /* 2- ancho 90% */
    width: 90%;
    /* 3- centrar */
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.container {
    text-align: center;
    
}

.youtuber, footer, header {
    /* 4- color de fondo */
    border: 2px solid lightgray;
    /* 5- redondear el borde */
    border-radius: 10px;
    /* 6- sombra */
    margin: 10px auto;
    padding: 20px;
    text-align: center;
    box-shadow: 5px solid black;    
}
footer {
    padding: 0px;
    color: white;
}

.imageHome{
    width: 60%;
    border:black 4px solid;
    border-radius: 3%;
    /* 7- tamanyo */
    /* Se utiliza en imágenes y videos 
    para asegurarse de que siempre llenen 
    completamente el contenedor, manteniendo
    su relación de aspecto*/
    object-fit: cover; 
}

.youtuber .images {

    /* 8- redondear la imagen*/
    width: 150px;
    height: 150px;
    border-radius: 80%;    
    /* Se utiliza en imágenes y videos 
    para asegurarse de que siempre llenen 
    completamente el contenedor, manteniendo 
    su relación de aspecto*/
    object-fit: cover; 
}

.youtuber h2 {    
    color: white;
    font-size: 1.5em;
    margin: 10px 0;
}

.youtuber p {
    color: white;
    font-size: 1em;
}

nav {
    /* 9- quita los puntos */
    
}

li {
    /* 10- haz que los li no sean de tipo bloque */
    display: inline; 
    /* 11- borde izquierdo rojo */
    border-left: 4px red solid;
    /* 12- separa el borde de la izquierda */
    padding-left: 5px;
}

nav a {
    /* 13- enlaces blancos */
    color: white;
    /* 14- sin subrayado */
    text-decoration: none;
}

nav a:hover {
    /* 15- cambia el color al subrayado*/
    border-bottom: 2px red solid;
}


.button {
    padding: 10px 20px;
    color: white;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    /* animacion en css, para cambiar el color del boton, no visto en clase 
    pero yo te lo regalo ;) */
    transition: background-color 0.3s ease;
}
.button:hover {
    /* 16- cambia el color al boton*/
    background-color: yellow;
}

@media all and (max-width: 700px) {
    .youtuber, footer {
        /* 17- cambia el color al BORDE*/
        border: 2px solid red;
    }   
    .button {
        /* 18- cambia el color al boton*/
        background-color: red;
        
              
    }   
    .button:hover {
        /* 19- cambia el color al boton*/
    }    
}
header {}