#auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  width: 100%;
  
  margin: 1rem auto;
  overflow: hidden;
  min-height: 400px;
}

#auth-text-cont {
  width: 350px;
}

#auth-link {
  color: var(--blue);
  text-decoration: none;
}

.auth-wrap {
  width: 350px;
  text-align: center;
}

.auth-field input {
  width: 90%;
  padding: 0.8rem;
  margin: 0.6rem 0;
  background: var(--background-color);
  border: 1px solid #333;
  border-radius: 0.5rem;
  color: var(--text-color);
}

.auth-field input:focus {
  border-color: #3b82f6;
  outline: none;
}

#auth-button {
  width: 95%;
  margin-top: 1rem;
  padding: 1rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--blue);

  filter: drop-shadow(0 0 5px rgba(66, 135, 245, 0.5));

  font-size: 15px;
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.2s ease;
}

#auth-button:hover {
  background: #2563eb;
}

#auth-links {
  margin-top: 1rem;
  font-size: 0.9rem;
}

#auth-links span {
  color: var(--text-color);
  text-decoration: none;
  cursor: pointer;
  opacity: 0.8;
}

#auth-links a {
  color: var(--text-color);
  text-decoration: none;
  opacity: 0.8;
}

.auth-alert { color: #f87171; margin: 0.5rem 0; }
.auth-notice { color: var(--blue); margin: 0.5rem 0; }

#triangle-cont-login {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 60%;
  z-index: -1;
}

#login-t1 {top: 10%; left: 15%; animation-name: floatingtrianglemin; animation-duration: 5s;}
#login-t2 {top: 60%; left: 90%; animation-duration: 5.4s;}
#login-t3 {top: 20%; left: 80%; animation-name: floatingtrianglemin; animation-duration: 4.2s;}
#login-t4 {top: 50%; left: 12%; animation-duration: 4.6s;}


@media (max-width: 800px) {
  #auth-container {
    flex-direction: column;
    gap: 0.5em;
    min-height: 600px;
  }
}

.login-fade {
  will-change: opacity, transform;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.login-fade.show {
  opacity: 1;
  transform: translateY(0);
}

.passwd-fade {
  will-change: opacity, transform;
  opacity: 0;
  transform: translateY(-50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.passwd-fade.show {
  opacity: 1;
  transform: translateY(0);
}

.pwd-wrap {
  transform: translateX(0);
  transition: transform 0.8s cubic-bezier(.19,.18,.2,1.15);
}

.pwd-hidden {
  transform: translateX(50vw) !important;
}

.signin-stay {
  transform: translateX(13.5vw) !important;
}

.signin-move {
  transform: translateX(0);
  transition: transform 0.8s cubic-bezier(.19,.18,.2,1.15);
}