body {
  font-family: Arial, sans-serif;
  margin: 0;
  background-color: #86878B;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  margin: 100px auto; /* Centro el contenedor */
  width: 400px; /* Ancho máximo del contenedor */
  height: 450px;
}

h2 {
  margin-bottom: 20px; /* Espacio inferior para separar del formulario */
  color: #333; /* Color del texto */
}

.form-group {
  margin-bottom: 20px; /* Espacio entre los campos del formulario */
  width: 100%; /* Asegura que el grupo ocupe todo el ancho */
}

label {
  display: block; /* Hace que el label ocupe todo el ancho */
  margin-bottom: 5px; /* Espacio entre el label y el campo */
  color: #555; /* Color del texto */
}

input[type="text"],
input[type="password"],
input[type="email"] { /* Asegúrate de incluir input[type="email"] */
  width: 100%; /* Ancho completo */
  padding: 10px; /* Espaciado interno */
  border: 1px solid #ccc; /* Borde sutil */
  border-radius: 5px; /* Bordes redondeados */
  font-size: 16px; /* Tamaño de fuente uniforme */
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus { /* Asegúrate de incluir input[type="email"] */
  border-color: #007bff; /* Cambia el color del borde al enfocarse */
  outline: none; /* Elimina el contorno predeterminado */
}

.submit-button {
  width: 110%; /* Ancho completo */
  padding: 10px; /* Espaciado interno */
  background-color: #28a745; /* Color de fondo */
  color: white; /* Color del texto */
  border: none; /* Sin borde */
  border-radius: 5px; /* Bordes redondeados */
  cursor: pointer; /* Cambia el cursor al pasar el mouse */
  transition: background-color 0.3s; /* Transición suave */
  font-size: 16px; /* Tamaño de fuente uniforme */
}

.submit-button:hover {
  background-color: #218838; /* Color al pasar el mouse */
}