label {
    font-family: 'GFS Didot';
    font-size: 20px;
    margin: 10px;
    
}

#selector {
    margin: 20px;
    flex-direction: row;
}


select:focus {
    border-color: #66afe9; 
    outline: none; 
}

option {
    padding: 10px; 
}

option:hover {
    background-color: #f0f0f0; 
}

#search-container.hidden,
#selectorPregunta.hidden,
#selectorComida.hidden, 
#selectorDieta.hidden,
#selectorAlergia.hidden,
#selectorPais.hidden,
#selectorCalorias.hidden,
#selectorBoton.hidden,
#selectorBotonReset.hidden{
display: none;
transition: opacity 0.3s ease-in-out;
}

#selectorPregunta
{
height: 300px;
padding-top: 50px;
}
#selectorPregunta h1
{
margin: 20px;
font-size: 2em;
    letter-spacing: 0.8em;
    transform: scaleY(1.1);
    transform-origin: top; 
    line-height: 2;
}

#selectorPregunta h1:hover{
    
    border-radius: 10px;
    cursor: pointer;
}

#selectorComida,
#selectorDieta,
#selectorAlergia,
#selectorPais,
#selectorCalorias,
#selectorBoton,
#selectorBoton2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center; 
    padding: 20px;      
    width: 100%;        
}
 


#selectorPais, #selectorCalorias {
    transition: opacity 0.3s ease-in-out;
}



/* Y mantener los estilos para los elementos internos */
h1 {
    margin: 0;
    text-align: center;
    font-size: 2em;
    letter-spacing: 0.8em;
    transform: scaleY(1.1);
    transform-origin: top; 
    line-height: 2;
}

.tipos-comida,
.dietas,
.alergias,
.paises
{
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

label {
    display: flex;
    align-items: center;
    gap: 5px;
}


::placeholder
{
color:rgb(248, 245, 245);
font-family:"Didot";
font-style:inherit;	
}

textarea {
resize:none;

}
input, select, textarea{
    border-radius: 20px;
    background-color: rgb(3, 3, 3);
    padding: 8px 12px;
    border: 1px solid #001401;
    outline: none;
    color: white;
    font-size: 20px;

}

button
{
    border-radius: 20px;
    padding: 12px 12px;
    font-size: 20px;
    font-family: "Didot";
}

button:hover
{
cursor: pointer;
color: white;
background-color: black;

}