@font-face {
    font-family: "Sukhumvit Set";
    src: url("fonts/sukhumvitset-thin.ttf") format("truetype");
}
body {
    font-family: "Sukhumvit Set", sans-serif;
    background-color: rgb(44, 44, 44);
}
main {
    font-family: "Sukhumvit Set", sans-serif;
    color: hsl(34, 59%, 46%);
    background-color:rgb(44, 44, 44); /* Cambia el color según tus preferencias */
    padding: 20px; /* Ajusta el relleno según tus necesidades */
}

.navbar {
    height: 70px; /* Ajusta la altura según tus necesidades */
    border-bottom: 2px solid hsl(34, 62%, 36%) !important; /* Borde inferior rojo de 4px */
}

.custom-navbar {
    background-color:rgb(44, 44, 44); /* Cambia esto al color que desees */
}
.navbar-collapse {
    background-color: rgb(44,44,44); /* Cambia esto al color que desees del menú desplegable principal   */
    border-radius: 4px; /* Bordes redondeados */
    padding: 10px; /* Espacio interno */
    border: #0f0b0b;
}
.custom-bg {
    background-color:gray; /* Cambia esto al color que desees */
    color: lab(56.64% 31.17 54.33);
    border: 1px solid hwb(27 15% 30%); /* Cambia esto al color que desees para las líneas */
}
.custom-text:hover {
    color: hsl(44, 50%, 46%); /* Cambia esto al color que desees al pasar el puntero */
}

.custom-text {
    color: hsl(34, 62%, 36%);
    font-size: 1.3rem;
    font-family: "Sukhumvit Set", sans-serif; /* Cambia 'Arial' a la fuente que desees */
    font-weight: bold;
    text-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.8); /* Sombra negra */
}

.custom-text:active,
.custom-text:focus {
    color: lch(52.93% 46.65 57.43); /* Cambia esto al color que desees al hacer clic o al enfocar */
}

button:focus,
button:active {
    background-color: hsl(34, 62%, 36%); /* Cambia esto al color que desees para el fondo */
    color: #b8862b; /* Cambia el color del texto */
    outline: none; /* Elimina el borde de enfoque predeterminado */
    border: 1px solid hsl(34, 62%, 46%); /* Agrega un borde para resaltar el botón */
}


/* Clase personalizada para cambiar el color de fondo del menú desplegable */
.dropdown-menu {
    background-color: lch(32.75% 0 296.81); /* Cambia esto al color que desees para el fondo del menú */
    font-size: 0.5rem; /* Ajusta el tamaño de la fuente */
}
.dropdown-menu ::selection {
    background-color: hsla(22, 71%, 49%, 0.829); /* Cambia esto al color que desees para la selección del texto */
    color: lab(90.21% -65.48 86.19 / 0.795); /* Cambia esto al color que desees para el texto seleccionado */
}
.dropdown-menu a,
.dropdown-menu button {
    font-size: 1.1rem; /* Ajusta el tamaño de la fuente para los elementos interactivos */
}

.dropdown-menu a:focus,
.dropdown-menu button:focus {
    background-color: hsl(34, 32%, 38%); /* Cambia esto al color que desees para el fondo al hacer focus */
    color:  hsla(22, 100%, 50%, 0.829); /* Cambia esto al color del texto al hacer focus */
    outline: none; /* Elimina el borde de enfoque predeterminado si es necesario */
}
.dropdown-menu a:hover,
.dropdown-menu button:hover {
    background-color: hwb(0 13% 86%); /* Fondo blanco al pasar el puntero */
    color: rgb(224, 120, 72); /* Cambia el color del texto al negro para contraste */
    outline: none; /* Elimina el borde de enfoque si es necesario */
}
.col {
    text-align: center;
}


.dropdown-menu:focus {
    background-color: hsl(34, 62%, 36%); /* Cambia esto al color que desees para el fondo al hacer focus */
    color: #ff0202; /* Cambia esto al color del texto al hacer focus */
    outline: none; /* Elimina el borde de enfoque predeterminado si es necesario */
}


#tituloGaleria {
    color: hsl(34, 62%, 36%);
    font-size: 2.5rem;
    font-family: "Sukhumvit Set";
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px; /* Espacio entre el título y la galería */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Sombra negra */
}