body {
 font-family: sans-serif;
 margin: 0;
 padding: 0;
 background-color: #f4f4f4;
 color: #333;
}


header {
 background-color: #333;
 color: #ffffff;
 padding: 20px;
 text-align: center;
}


main {
 padding: 20px;
}


h1{
 border-radius: 20px;
 color: #FFD700;
 padding: 10px;
 text-align: center;
}


h2{
 border-radius: 20px;
 color: #ff0000;
 padding: 10px;
 text-align: center;
}


h3{
 border-radius: 20px;
 color: #ff0000;
 padding: 10px;
 text-align: center;
}


.p{
 border-radius: 20px;
 color: #000000;
 padding: 10px;
 text-align: center;
}


button{
    border-radius: 20px;
    border-color: #ffd700;
    padding: 10px;
}


.articulo{
 background-color: #aacccc;
 padding: 20px;
 margin-bottom: 20px;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.article {
 background-color: #aacccc
}

.articulo img {
 background-color: #ffffff;
 max-width: 100%;
 height: auto;
 display: block;
 margin: 15px auto;
 border-radius: 10px;
}


.trivia {
 background-color: #007bff;
 padding: 20px;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.trivia h2 {
 color: #007bff;
 margin-top: 0;
}


#pregunta-container {
 margin-top: 15px;
}


#opciones {
 list-style: none;
 padding: 0;
}


#opciones li {
 padding: 10px;
 margin-bottom: 10px;
 background-color: white;
 border: 1px solid #ddd;
 border-radius: 4px;
 cursor: pointer;
 transition: background-color 0.3s ease;
}


#opciones li:hover {
 background-color: #f0f0f0;
}


.correcto {
 background-color: #28a745 !important;
 color: white;
}


.incorrecto {
 background-color: #dc3545 !important;
 color: white;
}


#resultado {
 margin-top: 15px;
 font-weight: bold;
}


.oculto {
 display: none;
}


#siguiente-pregunta {
 background-color: #007bff;
 color: white;
 border: none;
 padding: 10px 20px;
 border-radius: 5px;
 cursor: pointer;
 font-size: 1rem;
 margin-top: 15px;
}


#siguiente-pregunta:hover {
 background-color: #0056b3;
}


footer {
 font-size: 18px;
 border-radius: 20px;
 margin: 10px;
 color: #FFD700;
 background-color: #112A46;
 text-align: center;           
}