body {
  margin: 0;
  padding: 0;
  background-color: #b8b5c2; /* Cambiar el color de fondo */
}
.background-image {
  opacity: 0; /* Inicialmente, la imagen no es visible */
  transition: opacity 2s ease; /* Transición de 2 segundos */
}

/* Cuando se le da la clase 'show', la imagen se desvanecerá en */
.background-image.show {
  opacity: 1; /* Hace la imagen visible */
}
menu-container {
  position: absolute;
  top: 58px;
  left: 26px;
  right: 0;
  text-align: center;
  opacity: 0; /* Inicialmente, el menú no es visible */
  transition: opacity 2s ease; /* Transición de 2 segundos */
}

/* Cuando se le da la clase 'show', el menú se desvanecerá en */
.menu-container.show {
  opacity: 1; /* Hace el menú visible */
}
.menu {
 

  padding: 10px 20px;
  border-radius: 10px;
  transition: opacity 1s ease;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  display: inline;
}

.menu li a {
  color: white;
  font-family: 'Molengo', sans-serif;
  font-size: 18px;
  text-decoration: none;
  padding: 5px 10px;
}

.menu li a:hover {
  color: black;
}