/* SECTION MOCK */
.login {
  height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  z-index: 2;
}

.login-container {
  width: 100%;
  position: relative;
  height: 100%;
  padding-block: min(25rem, 25vh) min(5rem, 5vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.login-tagPage {
  display: flex;
  width: 10.4rem;
  height: 4.1rem;
  border-radius: 100px;
  border: 0.05rem solid rgba(255, 255, 255, 0.57);
  backdrop-filter: blur(14.199999809265137px);
  justify-content: center;
  align-items: center;
  gap: 1.3rem;
  margin-bottom: min(0.6rem, 0.6vh);
  text-align: center;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: 3rem; /* 166.667% */
  text-transform: capitalize;
}

.login-tagPage-icon {
  width: 0.4rem;
  display: block;
  height: 0.4rem;
}

.login-title {
  text-align: center;
  font-size: min(10rem, 10vh);
  font-style: normal;
  font-weight: 500;
  line-height: 1; /* 100% */
  text-transform: capitalize;

  margin-bottom: min(4.4rem, 4.4vh);
  width: min(88.6rem, 88.6vh);
}

.login-form {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;
  gap: min(2rem, 2vh);
  width: min(95.2rem, 95.2vh);
  height: fit-content;
  flex-shrink: 0;
}

.login-bg {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14.199999809265137px);
}

.login-containerInput {
  width: 46rem;
  flex-shrink: 0;

  border-radius: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-containerInput-input {
  width: 100%;
  height: 100%;
  outline: none;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 3rem; /* 150% */
  padding: 1.5rem 2rem;
}

.login-anchorForgot {
  width: min(40.6rem, 40.6vh);
  margin-bottom: min(3.4rem, 3.4vh);
}

.login-text {
  font-family: "Satoshi Variable";
  font-size: 1.8rem;
  font-style: normal;
  gap: 0.8rem;
  display: flex;
  font-weight: 500;
  line-height: 30px; /* 166.667% */
}

.login-text__white {
  color: #ffffff;
}

.login-text__orange {
  color: #f4783e;
}

.login-containerInput-input::placeholder {
  color: #fff;
  opacity: 0.5;
}

.login-button {
  margin-bottom: min(3.4rem, 3.4vh);
}

.join-floating {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  perspective: 1000px;
}

.join-floating__img {
  position: absolute;
  object-fit: contain;
}

.join-floating__img.is--1 {
  width: 15rem;
  height: 15rem;
  top: 30rem;
  left: 7rem;
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

.join-floating__img.is--2 {
  width: 14.5rem;
  height: 14.5rem;
  top: 15.5rem;
  left: 23.5rem;
}

.join-floating__img.is--3 {
  width: 22rem;
  height: 22rem;
  top: 40rem;
  left: 20rem;
}

.join-floating__img.is--4 {
  width: 6rem;
  height: 6rem;
  top: 40rem;
  left: 44rem;
  filter: blur(7.5px);
  -webkit-filter: blur(7.5px);
}

.join-floating__img.is--5 {
  width: 11rem;
  height: 11rem;
  top: 18rem;
  left: 61rem;
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

.join-floating__img.is--6 {
  width: 28.5rem;
  height: 13rem;
  top: 0rem;
  left: 75.5rem;
  filter: blur(7.5px);
  -webkit-filter: blur(7.5px);
}

.join-floating__img.is--7 {
  width: 9rem;
  height: 9rem;
  top: 10rem;
  left: 102rem;
}

.join-floating__img.is--8 {
  width: 7rem;
  height: 7rem;
  top: 19rem;
  right: 58rem;
  filter: blur(7.5px);
  -webkit-filter: blur(7.5px);
}

.join-floating__img.is--9 {
  width: 22.5rem;
  height: 32rem;
  top: 7rem;
  right: 17rem;
}

.join-floating__img.is--10 {
  width: 26rem;
  height: 16rem;
  top: 45.5rem;
  right: 19.5rem;
}

.join-floating__img.is--11 {
  width: 6rem;
  height: 6rem;
  top: 40rem;
  right: 11rem;
  filter: blur(7.5px);
  -webkit-filter: blur(7.5px);
}

@media screen and (orientation: portrait) {
  .login-form {
    width: 100%;
    height: fit-content;
  }

  .login-title {
    font-size: min(4rem, 4vh);
    width: min(28.1rem, 28.1vh);
  }

  .login-containerInput {
    width: min(29.7rem, 29.7vh);
    flex-shrink: 0;

    border-radius: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .login-containerInput-input {
    font-size: min(1.4rem, 1.4vh);
  }

  .login-tagPage {
    width: min(7.4rem, 7.4vh);
    height: min(3.2rem, 3.2vh);
    font-size: 1.2rem;
    gap: 0.4rem;
    margin-bottom: min(1.3rem, 1.3vh);
  }

  .login-anchorForgot {
    width: min(25.6rem, 25.6vh);
  }

  .login-button {
    width: min(19.7rem, 19.7vh);
    flex-shrink: 0;
  }

  .login__button--container {
    flex-grow: 0.8;
  }

  .login__button--blur {
    margin-left: -0.7rem;
  }
}

.login-container > *,
.join-floating__img {
  opacity: 0;
}