/* mobile-css for index.html and signup.css */

@media (max-width: 1480px) {
  .legal-part {
    margin-top: 96px;
  }
}

@media (max-width: 1024px) {
  .signup-title > a {
    height: 122px;

    > img {
      height: calc(98px + (100vw - 768px) * 0.09375);
    }
  }
}

@media (max-width: 816px) {
  .dialogue-frame {
    width: calc(605px + (100vw - 768px) * 0.97917);
  }
}

@media (max-width: 768px) {
  body {
    align-items: flex-start;
  }

  .floating-logo {
    height: 122px;
    width: 64px;
  }

  @keyframes moveToCorner {
    0% {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(3);
      z-index: 10;
    }
    100% {
      top: 28px;
      left: calc(0px + (100vw - 480px) * 0.11806);
      transform: translate(0, 0) scale(1);
      z-index: 1;
    }
  }

  .dark-fill {
    animation: changeColor 1.5s ease forwards;
  }

  @keyframes changeColor {
    0% {
      fill: var(--white);
    }
    100% {
      fill: var(--dark);
    }
  }

  @keyframes showBackground {
    0% {
      background-color: var(--dark);
      z-index: 5;
    }
    20% {
      background-color: var(--dark);
    }
    100% {
      background-color: rgba(255, 255, 255, 0);
      z-index: 1;
    }
  }

  #login-desktop {
    display: none;
  }

  #login-mobile {
    display: flex;
  }

  .content-wrapper-idx,
  .content-wrapper-sgn {
    row-gap: 0;
    padding: 34px 0;
    width: 100vw;
    height: 100vh;
  }

  .index-title {
    display: none;
  }

  .signup-title
  {
    height: 80px;
    margin-top: 16px;
    margin-bottom: 38px;

    > a > img {
      height: 80px;
      margin-left: calc(14px + (100vw - 480px) * 0.21528);
    }
  }

  .dialogue-frame {
    margin-top: calc(144px + (100vw - 480px) * 0.20833);
    margin-bottom: calc(55px + (100vw - 480px) * 0.05903);
    width: calc(444px + (100vw - 480px) * 0.54167);
    height: calc(476px + (100vw - 480px) * 0.055);
    padding: 32px 0;

    &.signup-height {
      margin-top: 14px;
      margin-bottom: calc(55px + (100vw - 480px) * 0.19097);

      width: calc(430px + (100vw - 460px) * 0.5833);
      height: clamp(587px, calc(587px + (100vw - 480px) * 0.04514), 600px);
      padding: 32px 0;
    }

    .blue-arrow {
      top: 46px;
      left: 52px;
    }

    .title {
      > h1 {
        font-size: clamp(48px, calc(48px + (100vw - 488px) * 0.04643), 61px);
        margin-bottom: 14px;
      }

      > svg {
        width: calc(52vw - 154px);
      }
    }
  }

  .s-up-margins {
    margin: 22px 0 32px;
    padding: 0 16px;
  }

  .acceptPP {
    margin-bottom: 32px;
  }
  
  .login-btns {
    flex-direction: column;
    row-gap: 21px;
    align-items: center;
 
    > .btn:first-of-type,
    > .btn:nth-of-type(2),
    > .signup-now {
      width: 182px;
      font-weight: 600;
      font-size: 16px;
      padding: 16px 24px;
    } 
  
    .btn {
      width: 182px;
      font-weight: 500;
      font-size: 16px;
      padding: 16px 24px;
    }
  }

  .sign-up {
    max-width: 768px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 35px;

    > p {
      letter-spacing: 0.6px;
    }

    > button {
      padding: 15px 23px;
    }
  }

  .legal-part {
    margin-top: 42px!important;

    &.lp-sgn {
      margin-top: 0!important; 
    }
  }
}

@media (max-width: 600px) {
  @keyframes moveToCorner {
    0% {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(3);
      z-index: 10;
    }
    100% {
      top: 28px;
      left: 14px;
      transform: translate(0, 0) scale(1);
      z-index: 1;
    }
  }

  .title > h1 {
    margin-bottom: 14px;
  }
}

@media (max-width: 500px) {
  .login-inputs {
    width: calc(403px + (100vw - 480px) * 1.05);

    > .input-frame {
      width: 100%;
    }
  }

  .s-up-margins {
    width: calc(0.4vw + 446.08px);

    > .input-frame {
    width: 100%;
    }
  }
}

@media (max-width: 480px) {
  .signup-title > a > img {
    margin-left: 14px;
  }

  .dialogue-frame,
  .dialogue-frame.s-up-margins {
    padding: 32px 16px;
    height: 476px;
    width: 95%;
    margin-top: 144px;
    margin-bottom: 55px;
    
    &.signup-height {
      width: 95%;
      padding: 32px 0;
      margin-bottom: 55px;
    }

    .blue-arrow {
      left: calc(20px + (100vw - 320px) * 0.2);
    }
  
    .title > svg {
      width: 92px;
    }
  
    .s-up-margins {
      width: calc(289px + (100vw - 320px) * 0.94375);
      margin-top: 22px;
    }
  }

  .login-inputs {
    width: 100%;
    margin-top: 32px;
  }

  .input-frame {
    width: 100%;

    > input {
    width: 60%;
    }
  }
}