html {
    height: 100%;
}
body {
    font-family: "Lucida Console", Monaco, monospace;
    background-image: url('Img/watercolor-light-peach-background_23-2150293766.avif');
    background-size: cover ;
    color: #333;
    text-decoration: none;
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.contenedor-principal { /*Contenedor usado en index y sobre mi*/
    flex: 1 0 auto;
    max-width: 800px;
    margin: 40px auto;
    background-image: url('Img/white-color-background-t2en042n03pm3ul9.jpg');
    background-origin: center ;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(127, 81, 8, 0.1);
}
.contenedor-principal h2 { /*Subtitulos usados en index y sobre mi*/
    color: #7f5108;
    border-bottom: 2px solid #f1f1f1;
    padding-bottom: 10px;
    justify-content: center;
    text-align: center;
}
.contenedor-principal h1 { /*Título principal usado en Index*/
    font-size: 2.5rem;
    text-align: center;
    color: #7f5108;
    border-bottom: 3px solid #f1f1f1;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

nav {/*Fondo de nav usado en todas las paginas*/
    background-image: url('Img/vector.jpg');
    background-position: center;
    padding: 15px 0;
    position: sticky;
    top: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.05);
    border-bottom: 4px  4px 12px rgba(0,0,0,0.1);
}

.nav {/*Lista dentro de nav usado en todas las paginas*/
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.nav li {/*Cuadros de nav usado en todas las paginas*/
    background-color: #8e5f14;
    padding: 8px 20px;
    border-radius: 8px;
    transition: 0.3s;
}
.nav li.actual {/*Pagina activa de nav usado en todas las paginas*/
    background-color: #e2725b;
}
.nav li:hover {/* Color de hover para los cuadros de nav */
    background-color: peachpuff; 
}
.nav li:hover a {/*Color de hover para el texto de nav*/
    color: gray;
}

.nav a {/*Texto de nav*/
    color: white;
    font-weight: bold;
    text-decoration: none;
}

h1 {/*Título principal usado en Index*/
    font-size: 2.5rem;
    text-align: center;
}
h1, h2 {/*Titulos de index*/ 
    color: #1a2a6c;
    border-bottom: 3px solid #f1f1f1;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.tabla-indice { /*Diseño de la tabla index*/
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.9rem;
}

.tabla-indice th {/*Header de la tabla index*/
    background-color: #8e5f14;
    color: white;
    padding: 12px;
    text-align: left;
}

.tabla-indice td {/*Celdas de la tabla index*/
    padding: 15px;
    border:1px solid #ddd;
    color:gray;
}

.tabla-indice a {/*Enlaces dentro de la tabla */
    color: #dd781a;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #dd781a;
    padding: 5px 10px;
    border-radius: 5px;
}
.tabla-indice a:hover {/*Hover enlaces dentro de la tabla*/
    background-color: #dd781a;
    color: white;
}
.grid-intereses {/*Diseño Espacio Tarjeta Intereses*/
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
    margin-top: 27px;
}
.tarjeta-interes { /*Diseño de la Tarjeta Intereses*/
    background: white;
    width: 270px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.tarjeta-interes:hover {/*Hover Tarjetas Interees*/
    transform: translateY(-10px); /*Mover 10px arriba*/
}

.header-tarjeta {/* Parte superior de la tarjetas Intereses*/
    height: 120px;
    border-radius: 15px 15px 0 0;
}
.musica { background-color: #9b59b6; } /* Izquierda */
.juegos { background-color: #34495e; } /*Centro */
.cocina { background-color: #e67e22; } /*Derecho*/

.cuerpo-tarjeta {/*Usado en intereses*/
    padding: 20px;
}
.cuerpo-tarjeta h3 {/*Usado en intereses*/
    margin-top: 0;
    color: #2c3e50;
    border-bottom: 2px solid #f1f1f1;
    padding-bottom: 10px;
}
.cuerpo-tarjeta p {/*Usado en intereses*/
    font-size: 0.9rem;
    line-height: 1.5;
    color: #666;
}
.opciones-trivia a {/* Botones de trivia */
    display: block;
    background: #ffffff;
    border: 2px solid #f7b51a;
    color: #f7b51a;
    text-decoration: none;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 12px;
    text-align: center;
    font-weight: 277px;
}

.opciones-trivia a:hover {/*Opciones hover trivia*/
    background: #fdab26;
    color: white;
    transform: translateX(10px);
}
footer { /*Usado en todas las paginas*/
    background: #1a2a6c;
    background: linear-gradient(to left, #FFCCAA, #7f5108);
    color: white;
    text-align: center;
    padding: 40px 20px;
    border-radius: 10px 10px 0 0;
    
}
.cuadro-info { /*Usado en trivia*/
    border: 2px solid #e74c3c;
    background-color: #fdedec;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin: 20px auto;
    max-width: 400px;
}
.cuadro-info li { /*Usado en trivia*/
    list-style: none;
    margin: 10px 0;
    text-align: left;
}

.layout-playlist { /*Menu en playlist*/
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.aside-playlist {/*Cuadro contenedor menu playlist*/
    flex: 0 0 180px;
    border-right: 2px solid #f1f1f1;
    padding-right: 20px;
}

.aside-playlist h2 { /*Titulo del menu playlist*/
    font-size: 1.2rem;
    color: #7f5108;
    border-bottom: 2px solid #FFDAA5;
}

.aside-playlist ul {/*Listado del menu playlist*/
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.aside-playlist li {/*Celdas del menu playlist*/
    margin-bottom: 15px;
}

.aside-playlist a {/*Enlaces del menu playlist*/
    text-decoration: none;
    color: #8e5f14;
    font-weight: bold;
    transition: 0.3s;
}

.aside-playlist a:hover {/*Hover enlaces del menu playlist*/
    color: #e2725b;
}
.aside-playlist li.actual a{/*Pagina activa del menu playlist*/
    color: #e2725b;

}

.video{/*Cuadro contenedor video usado en playlist*/
    position: relative;
    padding-bottom: 50%;
    height: 0;
    max-width: 100%;
    margin-top: 20px;
    border-radius: 10px;
}