@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); /* Importa la fuente "Open Sans" de Google Fonts */
@import url("https://www.svgbackgrounds.com/category/gradient/");
* {
  margin: 0; /* Elimina márgenes predeterminados */
  padding: 0; /* Elimina rellenos predeterminados */
  box-sizing: border-box; /* Ajusta el modelo de caja para incluir bordes y rellenos en el tamaño total */
  font-family: "Open Sans", sans-serif; /* Aplica la fuente "Open Sans" a todos los elementos */
}

body {
  margin: auto;
  overflow: auto;
  background: linear-gradient(
    315deg,
    rgba(101, 0, 94, 1) 3%,
    rgba(60, 132, 206, 1) 38%,
    rgba(48, 238, 226, 1) 68%,
    rgba(255, 25, 25, 1) 98%
  );
  animation: gradient 15s ease infinite;
  background-size: 400% 400%;
  background-attachment: fixed;
}

@keyframes gradient {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

.wave {
  background: rgb(255 255 255 / 25%);
  border-radius: 1000% 1000% 0 0;
  position: fixed;
  width: 200%;
  height: 12em;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.wave:nth-of-type(2) {
  bottom: -1.25em;
  animation: wave 18s linear reverse infinite;
  opacity: 0.8;
}

.wave:nth-of-type(3) {
  bottom: -2.5em;
  animation: wave 20s -1s reverse infinite;
  opacity: 0.9;
}

@keyframes wave {
  2% {
    transform: translateX(1);
  }

  25% {
    transform: translateX(-25%);
  }

  50% {
    transform: translateX(-50%);
  }

  75% {
    transform: translateX(-25%);
  }

  100% {
    transform: translateX(1);
  }
}
.container {
  position: fixed; /* Fija el contenedor */
  top: 10%; /* Posición en la parte superior */
  left: 50%; /* Centra horizontalmente */
  transform: translateX(-50%); /* Ajusta para centrar completamente */
  padding: 10px; /* Espaciado interno */
}
.text {
  color: #fff;
  overflow: hidden;
  font-size: 3.6rem;
  font-weight: 700;
  border-right: 0.15em solid rgb(164, 12, 195);
  white-space: nowrap;
  animation: typing 6s steps(60, end) infinite;
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.wrapper {
  width: 400px; /* Ancho de 400px */
  border-radius: 8px; /* Bordes redondeados de 8px */
  padding: 30px; /* Relleno interno de 30px */
  text-align: center; /* Centra el texto */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Borde con transparencia */
  backdrop-filter: blur(15px); /* Aplica un efecto de desenfoque de fondo */
  -webkit-backdrop-filter: blur(
    12px
  ); /* Efecto de desenfoque para navegadores basados en WebKit */
  background: rgba(255, 255, 255, 0.2);
  position: fixed; /* Fija el contenedor */
  top: 30%; /* Posición en la parte superior */
  left: 40%; /* Centra horizontalmente */
}

form {
  display: flex; /* Utiliza el diseño flexbox */
  flex-direction: column; /* Ordena los elementos en una columna */
}

h2 {
  font-size: 2rem; /* Tamaño de fuente de 2rem */
  margin-bottom: 20px; /* Margen inferior de 20px */
  color: #fff; /* Color del texto blanco */
}

.input-field {
  position: relative; /* Posición relativa para posicionar internamente */
  border-bottom: 2px solid #ccc; /* Borde inferior de 2px sólido y gris */
  margin: 15px 0; /* Margen vertical de 15px */
}

.input-field label {
  position: absolute; /* Posición absoluta dentro del contenedor relativo */
  top: 50%; /* Centrado vertical */
  left: 0; /* Alineado a la izquierda */
  transform: translateY(-50%); /* Ajuste para el centrado vertical */
  color: #fff; /* Color del texto blanco */
  font-size: 16px; /* Tamaño de fuente de 16px */
  pointer-events: none; /* Evita que el usuario interactúe con la etiqueta */
  transition: 0.15s ease; /* Transición suave para los cambios */
}

.input-field input {
  width: 100%; /* Ancho completo */
  height: 40px; /* Altura de 40px */
  background: transparent; /* Fondo transparente */
  border: none; /* Sin borde */
  outline: none; /* Sin contorno al enfocar */
  font-size: 16px; /* Tamaño de fuente de 16px */
  color: #fff; /* Color del texto blanco */
}

.input-field input:focus ~ label,
.input-field input:valid ~ label {
  font-size: 0.8rem; /* Tamaño de fuente reducido */
  top: 10px; /* Ajuste de posición vertical */
  transform: translateY(-120%); /* Ajuste de transformación para el centrado */
}

button {
  background: #fff; /* Fondo blanco */
  color: #000; /* Color del texto negro */
  font-weight: 600; /* Fuente en negrita */
  border: none; /* Sin borde */
  padding: 12px 20px; /* Relleno de 12px vertical y 20px horizontal */
  cursor: pointer; /* Cambia el cursor al estilo de puntero */
  border-radius: 3px; /* Bordes redondeados de 3px */
  font-size: 16px; /* Tamaño de fuente de 16px */
  border: 2px solid transparent; /* Borde transparente */
  transition: 0.3s ease; /* Transición suave para los cambios */
}

button:hover {
  color: #fff; /* Color del texto blanco al pasar el mouse */
  border-color: #fff; /* Color del borde blanco al pasar el mouse */
  background: rgba(
    255,
    255,
    255,
    0.15
  ); /* Fondo con transparencia al pasar el mouse */
}