/* Estilos generales para el cuerpo de la página */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #1C2833;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Estilos para el contenedor principal */
main {
  flex: 1; /* Hace que el elemento main ocupe todo el espacio vertical disponible */
}

/* Estilos para el contenedor del formulario de inicio de sesión */
.login-box {
  margin: auto;
  width: 25rem;
  padding: 40px;
  background: rgba(24, 20, 20, 0.987);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 10px;
}

/* Estilos para los campos de entrada del formulario de inicio de sesión */
.login-box .user-box {
  position: relative;
}
.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.login-box .user-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}
.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #ffffff;
  font-size: 12px;
}

/* Estilos para el botón de envío del formulario */
.cta {
  border: none;
  background: none;
  cursor: pointer;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 5%;
  color: #fff;
}
.cta span {
  padding-bottom: 7px;
  letter-spacing: 4px;
  font-size: 14px;
  padding-right: 15px;
  text-transform: uppercase;
  color: #fff;
}
.cta svg {
  transform: translateX(-8px);
  transition: all 0.3s ease;
  color: #fff;
}
.cta:hover svg {
  transform: translateX(0);
}
.cta:active svg {
  transform: scale(0.9);
}
.hover-underline-animation {
  position: relative;
  color: #fff;
  padding-bottom: 20px;
}
.hover-underline-animation:after {
  content: "";
  position: absolute;
  width: 84%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.cta:hover .hover-underline-animation:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Estilos para el logo de la página */
.logo {
  margin-left: 25%;
  margin-bottom: 10px;
}

/* Estilos para el pie de página */
footer {
  background-color: #1C2833;
  color: white;
  padding: 20px;
  text-align: center;
  margin-left: 34%;
}