body {
  margin: 0;
  overflow: hidden;
}
canvas {
  display: block;
}
/* Estilos para el cuadro de formulario */
#formContainer {
  position: absolute;
  top: 30%; /* 40px desde arriba */
  left: 50%; /* Centramos horizontalmente */
  transform: translateX(
    -50%
  ); /*   Mueve el contenedor hacia la izquierda por la mitad de su ancho */
  padding: 20px;
  width: 100%;
  max-width: 300px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9); /* Fondo semitransparente */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  z-index: 10; /* Asegura que esté por encima de la escena de Three.js */
}
#formContainer h1 {
  text-align: center;
}

#formContainer input {
  border-radius: 10px;
  width: 90%;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

/* Estilo para el segundo formulario */
#secondFormContainer {
  display: none; /* Oculto inicialmente */
  position: absolute;
  top: 30%; /* 40px desde arriba */
  left: 50%; /* Centramos horizontalmente */
  transform: translateX(
    -50%
  ); /*   Mueve el contenedor hacia la izquierda por la mitad de su ancho */
  padding: 20px;
  width: 100%;
  max-width: 300px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9); /* Fondo semitransparente */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  z-index: 10; /* Asegura que esté por encima de la escena de Three.js */
}

#secondFormContainer input {
  border-radius: 10px;
  width: 90%;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

#secondFormContainer {
  text-align: center;
}
/* Estilo para el tercer formulario */
#thirdFormContainer {
  display: none; /* Oculto inicialmente */
  position: absolute;
  top: 30%; /* 40px desde arriba */
  left: 50%; /* Centramos horizontalmente */
  transform: translateX(
    -50%
  ); /*   Mueve el contenedor hacia la izquierda por la mitad de su ancho */
  padding: 20px;
  width: 100%;
  max-width: 300px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9); /* Fondo semitransparente */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  z-index: 10; /* Asegura que esté por encima de la escena de Three.js */
}

#thirdFormContainer {
  text-align: center;
}

/* Estilo para el cuarto formulario */
#fourthFormContainer {
  display: none; /* Oculto inicialmente */
  position: absolute;
  top: 30%; /* 40px desde arriba */
  left: 50%; /* Centramos horizontalmente */
  transform: translateX(
    -50%
  ); /*   Mueve el contenedor hacia la izquierda por la mitad de su ancho */
  padding: 20px;
  width: 100%;
  max-width: 300px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9); /* Fondo semitransparente */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  z-index: 10; /* Asegura que esté por encima de la escena de Three.js */
}
#fourthFormContainer input {
  border-radius: 10px;
  width: 90%;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}
#fourthFormContainer {
  text-align: center;
}
/* Estilo para el quinto formulario */
#fifthFormContainer {
  display: none; /* Oculto inicialmente */
  position: absolute;
  top: 20%; /* 40px desde arriba */
  left: 50%; /* Centramos horizontalmente */
  transform: translateX(
    -50%
  ); /*   Mueve el contenedor hacia la izquierda por la mitad de su ancho */
  padding: 20px;
  width: 100%;
  max-width: 300px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9); /* Fondo semitransparente */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  z-index: 10; /* Asegura que esté por encima de la escena de Three.js */
}

#fifthFormContainer {
  text-align: center;
}
/* Estilo para el sexto formulario */
#sixthFormContainer {
  display: none; /* Oculto inicialmente */
  position: absolute;
  top: 30%; /* 40px desde arriba */
  left: 50%; /* Centramos horizontalmente */
  transform: translateX(
    -50%
  ); /*   Mueve el contenedor hacia la izquierda por la mitad de su ancho */
  padding: 20px;
  width: 100%;
  max-width: 300px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9); /* Fondo semitransparente */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  z-index: 10; /* Asegura que esté por encima de la escena de Three.js */
}

#sixthFormContainer {
  text-align: center;
}
/* Estilos para el botón de play */
#playButton,
#nombre,
#niño,
#niña,
#regalo,
#enviar,
#aceptar {
  width: 100%;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
#playButton:hover,
#nombre:hover,
#niño:hover,
#niña:hover,
#regalo:hover,
#enviar:hover,
#aceptar:hover {
  background-color: #218838;
}
.snowflake {
  position: absolute;
  top: -10px;
  color: white;
  font-size: 1em;
  opacity: 0.8;
  pointer-events: none;
  animation: fall linear infinite;
}

@keyframes fall {
  to {
    transform: translateY(100vh);
    opacity: 0;
  }
}
.button-container {
  display: flex;
  gap: 10px; /* Espacio entre los botones */
}

button {
  padding: 10px 20px;
  font-size: 16px;
}
/* Estilos para la carta */
.carta {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 2px solid #d72d2d;
  border-radius: 10px;
  background-color: #fff9f9;
  color: #333;
  line-height: 1.5;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* Títulos y detalles */
.carta h1 {
  color: #d72d2d;
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
}

.carta p {
  font-size: 18px;
}

.firma {
  margin-top: 20px;
  font-size: 18px;
  font-style: italic;
  text-align: right;
  color: #333;
}