@font-face {
  font-family: 'ChauPhilomeneOne-Regular';
  src: url('/01_Yo_nunca/src/fuentes/ChauPhilomeneOne-Regular.ttf') format('truetype'); /*ruta por referencia respecto carpeta donde se encuentra index.css*/
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(90deg, #014AAD, #C96CE6, #A8E6CF);
  background-size: 300% 300%; /* Para permitir un movimiento fluido */
  animation: gradientMove 10s ease infinite; /* Animación de movimiento */
  position: relative;
  overflow: hidden;
  opacity: 0; /* Ocultar contenido inicialmente */
  overflow-x: hidden; /* Evita scroll lateral no deseado */
}


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

#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.container {
  text-align: center;
}

.logo-container {
  margin-bottom: 2vh;
}

.logo {
  font-size: 8vw;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  width: 20vw;  /* Ajusta el ancho relativo al 50% del ancho del viewport */
  height: auto; /* Mantén la relación de aspecto correcta */
  margin-bottom: 2vh;
  margin-top: 2vh;
  margin-left: auto;
  margin-right: auto;
}

h1 {
  font-size: 6vw;
  color: #000;
  text-shadow: 1px 1px 2px rgb(244, 29, 29), -1px -1px 2px rgb(0, 255, 255);
  font-family: 'ChauPhilomeneOne-Regular', sans-serif;
  margin-bottom: 2vh;
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-container {
  display: flex;
  align-items: center;
  margin-bottom: 2vh;
  background-color: #f2f2f2;
  border-radius: 6vh;
  padding: 1vh 2vw;
  width: 30vw;
  height: auto;
}

.icon {
  width: 3vw;
  height: auto;
  margin-right: 1vw;
}

.input-field {
  border: none;
  background-color: transparent;
  outline: none;
  font-size: 1.8vw;
  width: 100%;
  padding: 1vw;
  font-family: 'ChauPhilomeneOne-Regular', sans-serif;
}

.remember-container {
  display: flex;
  align-items: center;
  margin-bottom: 4vh;
}

.remember-label {
  font-size: 1.8vw;
  color: white;
  font-family: 'ChauPhilomeneOne-Regular', sans-serif;
  margin-left: 1vw;
}

.button-container {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.btn-entrar, .btn-cancelar {
  background-color: #29211d;
  color: white;
  padding: 1.5vw 4vh;
  font-size: 1.8vw;
  text-decoration: none;
  border-radius: 6vh;
  transition: background-color 0.3s ease;
  font-family: 'ChauPhilomeneOne-Regular', sans-serif;
  width: 20vw;
  height: auto;
  border: none;
  cursor: pointer;
}

.btn-entrar:hover {
  background-color: #4b3810;
  transform: translateY(-0.5vh); /* Mueve el botón hacia arriba */
  box-shadow: 1vw 1vw 2vw rgba(0, 0, 0, 0.4); /* Mueve la sombra */
}

.btn-entrar:active {
  background-color: #4b3810; /* Cambia a un color más oscuro o diferente cuando se presiona */
  transform: translateY(0.5vh); /* Mueve el botón hacia abajo para simular la acción de clic */
  box-shadow: 0.5vw 0.5vw 1vw rgba(0, 0, 0, 0.3); /* Ajusta la sombra durante el clic */
}

.btn-cancelar:active {
  background-color: #fd5a90; /* Cambia a un color más oscuro o diferente cuando se presiona */
  transform: translateY(0.5vh); /* Mueve el botón hacia abajo para simular la acción de clic */
  box-shadow: 0.5vw 0.5vw 1vw rgba(0, 0, 0, 0.3); /* Ajusta la sombra durante el clic */
}

.btn-cancelar:hover {
  background-color: #fd5a90;
  transform: translateY(-0.5vh); /* Mueve el botón hacia arriba */
  box-shadow: 1vw 1vw 2vw rgba(0, 0, 0, 0.4); /* Mueve la sombra */
}