@media (max-width: 1024px) {
  .index-header {
    top: 40px
  }

  @keyframes flyToCorner {
    0% {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    100% {
      top: 37px;;
      left: 38px;
      transform: translate(0, 0);
    }
  }

  .logo-fly {
    width: 60px;
  }
}

@media (max-width: 768px) {
  .log-in-card {
    width: 415px;
    height: 475px;
  }

  .index-input {
    width: 364px;
  }

  form input {
    width: 348px;
  }

  #loginForm {
    gap: 16px;
    align-items: center;
  }

  .log-in-card {
    gap: 30px;
  }

  .index-header{
    right: 38px;
  }

  button {
    font-size: 18px;
  }

  .signup-container{
    width: 415px;
    height: 595px;
  }

  #returnToLogin {
    left: 23px;
  }

  @keyframes flyToCorner {
  0% {
    width: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  100% {
    width: 64px;
    top: 37px;;
    left: 38px;
    transform: translate(0, 0);
  }
}
}

@media (max-width: 480px) {
  .index-header {
    width: 292px;
    top: unset;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
  }

  .legals-login{
    bottom: 22px;
    width: 246px;
    justify-content: center;
  }

  button,
  .guest,
  .signup-button {
    height: 51px;
    width: 180px;
    font-size: 16px;
  }

  .login-buttons{
    flex-direction: column;
    gap: 21px;
    margin-top: 20px;
  }

  #openSignUpBtn{
    width: 104px;
  }

  
  .login h1,
  .signup-container h1 {
    font-size: 47px;
  }

  #returnToLogin {
    left: 20px;
    top: 45px;
  }
}

@media (max-width: 424px) {
  .log-in-card,
  .signup-container {
    width: clamp(300px, 95vw, 425px);
  }

  .index-input {
    width: 281px;
  }

  form input {
    width: 265px
  }

  .underline {
     margin: 12px 0 16px 0;
  }

  #signUpForm{
    gap: 18px;
    padding-bottom: 15px;
  }
}

@media (max-height: 700px) {  
  .log-in-card{
    height: 400px !important;
    gap: 15px;
  }

  .login-buttons {
    gap: 10px;
    margin-top: 0;
  }
}