/*max-width: 1320px*/

@media (max-width: 1320px) {
  .mainpageSignUpContainer {
    width: 292px;
    height: 49px;
  }
}

/*max-width: 1200px*/

@media (max-width: 1200px) {
  .loginContainer {
    left: calc((100vw - 652px) / 2);
  }

  .legalButtonsContainer {
    left: calc((100vw - 246px) / 2);
  }
}

/*max-width: 890px */

@media (max-width: 890px) {
  .mainpageSignUpContainer {
    /*left: calc(100% / 2);*/
    top: 37px;
    right: 38px;
  }

  .animateMobile {
    width: 64px;
    height: 78.03px;
    top: 37px;
    left: 38px;
    gap: 10px;
  }

  @-webkit-keyframes slide-tl {
    0% {
      top: 402px;
      left: 164px;
      width: 100.03px;
      height: 121.97px;
      -webkit-transform: translateY(0) translateX(0);
      transform: translateY(0) translateX(0);
    }
    100% {
      width: 64px;
      height: 78.03px;
      top: 37px;
      left: 38px;
      gap: 10px;
      -webkit-transform: translateY(0) translateX(0);
      transform: translateY(0) translateX(0);
    }
  }

  @keyframes slide-tl {
    0% {
      top: 402px;
      left: 164px;
      width: 100.03px;
      height: 121.97px;
      -webkit-transform: translateY(0) translateX(0);
      transform: translateY(0) translateX(0);
    }
    100% {
      width: 64px;
      height: 78.03px;
      top: 37px;
      left: 38px;
      gap: 10px;
      -webkit-transform: translateY(0) translateX(0);
      transform: translateY(0) translateX(0);
    }
  }
}

/*max-width: 670px */

@media (max-width: 670px) {
  .animate {
    display: none;
  }

  .animateMobile {
    width: 100.03px;
    height: 121.97px;
    top: 402px;
    left: 164px;
    gap: 0px;
    display: flex;
    position: absolute;
    transition: transform 400ms ease-in-out, width 400ms ease-in-out,
      height 400ms ease-in-out, top 400ms ease-in-out, left 400ms ease-in-out !important;
    animation: slide-tl 0.6s 0.4s forwards !important;
  }

  @-webkit-keyframes slide-tl {
    0% {
      top: 402px;
      left: 164px;
      width: 100.03px;
      height: 121.97px;
      -webkit-transform: translateY(0) translateX(0);
      transform: translateY(0) translateX(0);
    }
    100% {
      width: 64px;
      height: 78.03px;
      top: 37px;
      left: 38px;
      gap: 10px;
      -webkit-transform: translateY(0) translateX(0);
      transform: translateY(0) translateX(0);
    }
  }

  @keyframes slide-tl {
    0% {
      top: 402px;
      left: 164px;
      width: 100.03px;
      height: 121.97px;
      -webkit-transform: translateY(0) translateX(0);
      transform: translateY(0) translateX(0);
    }
    100% {
      width: 64px;
      height: 78.03px;
      top: 37px;
      left: 38px;
      gap: 10px;
      -webkit-transform: translateY(0) translateX(0);
      transform: translateY(0) translateX(0);
    }
  }

  .loginContainer {
    width: 422px;
    height: 515px;
    top: 205.5px;
    padding: 32px 70px 32px 70px;
    gap: 32px;
    border-radius: 30px;
    left: calc((100vw - 562px) / 2);
  }

  .interactionContainer {
    width: 364px;
    height: 192px;
    gap: 16px;
  }

  .errorMessage {
    position: relative;
  }

  .rememberMeSection {
    height: 24px;
    padding: 0px 16px 0px 16px;
    gap: 16px;
  }

  .mainpageLoginButton {
    width: 180px;
    height: 51px;
    padding: 4px 0px 4px 0px;
    gap: 10px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 19.2px;
    text-align: left;
  }

  .mainpageGuestButton {
    width: 180px;
    height: 51px;
    padding: 4px 0px 4px 0px;
    gap: 10px;
    border-radius: 8px;
    border: 1px 0px 0px 0px;
    font-size: 16px;
    font-weight: 700;
    line-height: 19.2px;
    text-align: left;
  }
}

/*max-width: 580px */

@media (max-width: 580px) {
  .loginContainer {
    width: 160px;
    left: calc((100vw - 300px) / 2);
  }
}