body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}
h1 {
    margin: 0;
    padding: 0;
    font-size: 24px;
}

a{
    color: #006400;
}
a:hover{
    color: #006400;
    text-decoration:none;
}
.container {
    gap: 10px;
    box-sizing: border-box;
    padding: 10px;
}
header {
    background-color: #006400;
    color: white;
    text-align: center;
    padding: 10px 0;
    font-size: 1.5em;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.contact-info {
    background-color: #eafaea;
    color: #006400;
    text-align: center;
    padding: 10px;
    font-size: 1em;
}

.contact-info a{
    color:#E0D116;
    text-decoration:underline;
}

.contact-info a:hover{
    color:#6BE016;
    text-decoration:none;
}


.info_contact{
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    
    
    display: flex;
    flex-direction: column;


    width: 95%;           /* Ocupará todo el ancho de su celda */
    min-width: 200px;      /* Nunca será más pequeño que 200px */

    height: 100%;         /* Altura fija */
}



.block {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    
    
    display: flex;
    flex-direction: column;


    width: 95%;           /* Ocupará todo el ancho de su celda */
    min-width: 200px;      /* Nunca será más pequeño que 200px */

    height: 150px;         /* Altura fija */
    overflow: hidden;      /* Oculta contenido excedente */
}

.block p{
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
/*para el primer bloque solo*/
#first{
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 30;
    overflow: hidden;   } 

#first a{
    color: #006400;
    text-decoration:underline;
}

#first a:hover{
    color: #006400;
    text-decoration:none;
}

.block h2 {
    font-size: 18px;
    margin-bottom: 5px;
    color: #006400;
    background-color: white;
    padding: 0px;
}

.block h3 {
    font-size: 14px;
    margin-bottom: 0px;
    margin-top: 0px;
    color: #000000;
    background-color: white;
    padding:5px;
}

.block a {
    color: #000000;
    text-decoration: none;

}

.block a:hover {
    color: #006400;
}
.content-container {
    margin-top: 5px;
    flex-grow: 1;
    display: flex;
    align-items: top;
    justify-content: left;
    height: 100%;
}
.content {
    display: none;
}
.content.active {
    display: block;
}
.block.clases {
    grid-area: clases;
    height: 100%;

}




#next-clase{
    font-weight: bold;
    color: #006400;
}

#next-clase:hover {
    cursor: pointer;
  }
.block.talleres {
    grid-area: talleres;
    

}
.block.curiosidades {
    grid-area: curiosidades;

}
.block.trucos {
    grid-area: trucos;
}

#sol_acertijo1 {

    color: #006400;

}