/* Media Queries for login.css */
@media(max-width: 750px) {
  .login-box {
    max-width: 500px;
  }
}

@media(max-width:700px) {
  .logo-animated.shrink {
    top: 46px;
    left: 105px;
  }

  .logo-animated {
    top: 35%;
    left: 30%;
  }
}

@media(max-width: 600px) {
  .login-box {
    width: 100%;
    max-width: 380px;
    padding: 5px;
    margin-top: 220px;
  }

  .buttons {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    margin-top: 20px;
    gap: 15px;
  }

  .login-btn,
  .guest-btn {
    width: 180px;
  }

  .underline img {
    width: 88px;
  }

  .login-box h2 {
    font-size: 47px;
  }

  .input-wrapper input {
    height: 35px;
  }

  .top-right {
    display: none;
  }

  .top-right-down {
    margin-top: 40px;
  }

  .logo-animated.shrink {
    top: 50px;
    left: 90px;
  }

  .logo-animated {
    top: 35%;
    left: 30%;
  }
}

@media(min-width:600px) {
  .top-right-down {
    display: none;
  }
}

@media(max-width:500px) {
  .logo-animated.shrink {
    top: 50px;
    left: 40px;
  }

  .logo-animated {
    top: 35%;
    left: 30%;
  }
}

@media(max-width: 401px) {
  .signup-btn:hover {
    background-color: #00BEE8;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  }

  .login-btn:hover {
    background-color: #00BEE8;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  }

  .guest-btn:hover {
    color: #00BEE8;
    border-color: #00BEE8;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  }

  .footer a:hover {
    color: #00BEE8;
    font-weight: 600;
    transform: scale(1.03);
  }
}

@media(max-width:400px) {

  .logo-animated {
    top: 40%;
    left: 110px;
    width: 100px;
  }

  .logo-animated.shrink {
    top: 20px;
    left: 35px;
    width: 46px;
  }

  .white-overlay {
    height: 100vh;
    background-color: #2a3647;
    transition: opacity 2s ease-in-out;
  }

  .footer {
    margin-top: 40px;
  }

  .login-box {
    min-height: 370px;
    max-width: 310px;
    margin-top: 120px;
  }

  .signup-btn {
    padding: 10px 16px 10px 16px;
  }

  .top-right-down {
    margin-top: 50px;
  }

  .footer a {
    margin-top: 25px;
  }

  .input-group {
    margin: 8px;
  }

  .signup-btn:active {
    background-color: #00BEE8;
  }

  .error-message {
    font-size: 12px;
  }

}