/* stywame.css */
/* Estilos de fondo */
.fondo {
  background-image: url("imgg.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Estilos para centrar el formulario y ajustar el diseño */
fieldset {
  width: 70%; /* Ajusta el ancho del contenedor del formulario */
  margin: 5rem auto; /* Centra el formulario horizontal y verticalmente */
  background-color: white;
  border-radius: 10px;
  box-shadow: 1px -1px 17px 0px rgba(0, 0, 0, 0.75);
  box-sizing: border-box; /* Incluye el relleno y borde en el ancho total */
  text-align: center; /* Alinea el texto del formulario al centro */
  padding: 20px;
  max-height: 600px; /* Limita la altura máxima del contenedor del formulario */
  overflow-y: auto; /* Agrega desplazamiento vertical si el contenido excede la altura */
}

/* Estilos para el título del formulario */
form h1 {
  font-family: Arial, Helvetica, sans-serif;
}

/* Estilos para los campos de entrada y textarea */
input[type=text], select, textarea {
  width: calc(100% - 24px); /* Ajusta el ancho de los campos */
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

/* Estilos para el botón */
input[type=submit] {
  background-color: #06db7b;
  border: 0px;
  padding: 10px 40px;
  color: white;
  font-size: 1rem;
  outline: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%; /* Ajusta el ancho del botón */
}

input[type=submit]:hover {
  background-color: #05b569;
}


/* Agregar regla @media para dispositivos móviles */
@media screen and (max-width: 500px) {
  fieldset {
    width: 90%; /* Ajustar el ancho del contenedor del formulario para dispositivos móviles */
    margin: 2rem auto; /* Ajustar el margen del formulario */
    max-height: none; /* Eliminar la altura máxima en dispositivos móviles */
  }

  input[type=text], select, textarea {
    width: calc(100% - 20px); /* Ajustar el ancho de los campos en dispositivos móviles */
  }

  input[type=submit] {
    width: calc(100% - 20px); /* Ajustar el ancho del botón en dispositivos móviles */
  }
}