body {
  background-color: rgba(13, 124, 102, 0.5);
}
/********************/
/* SECTION SINGUP */
/* SECTION LOGIN */
/********************/
.section-login,
.section-singup {
  flex-direction: column;
  padding: 4.8rem;

  background-color: #ebe1f8;
  width: 29vw;
  margin: 6rem auto;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.logo-box {
  margin-bottom: 2.4rem;
}

.logo-sw {
  width: 10rem;
}

.header-save {
  font-size: 4.4rem;
}
.login-form-box,
.singup-form-box {
  flex-direction: column;
  align-items: flex-start;
  color: #0d7c66;
}

.input-box {
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 22vw;
  gap: 1.5rem;
}

.input-box label {
  padding: 0 0.8rem;
  font-size: 2rem;
}

.input-box input {
  font-family: inherit;
  font-size: inherit;
  height: 100%;
  width: 100%;
  padding: 1.2rem 3.2rem;
  border: none;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  color: #6c6279;
  font-weight: 400;
  position: relative;
}

.input-box input::placeholder {
  color: #ac9cc1;
  font-weight: 300;
}

.login-form-box *:focus,
.singup-form-box *:focus {
  outline: none;
  box-shadow: 0 0 0 0.5rem rgba(61, 150, 134, 0.5);
}

.form-icon {
  position: absolute;
  top: 5.1rem;
  left: 1rem;
  color: #ac9cc1;
}

.question-box {
  font-size: 1.4rem;
  color: #0d7c66;
  gap: 0.8rem;
}

.question-box .link {
  font-weight: 700;
}

/* ERRORS */
.error-box {
  display: none;
}

.error-icon {
  position: absolute;
  top: 5rem;
  right: 1rem;
  color: #cf0b01;
}

.error-text {
  color: #cf0b01;
}

.session-error,
.show-error .error-box {
  display: block;
  text-transform: uppercase;
  font-size: 1.4rem;
  margin-left: auto;
}

.show-error input {
  border: solid 2px #0d7c66;
}

.show-error .error-text {
  margin-top: -1rem;
}

/* ////////////////////////////// */
/* FOOTER */
/* ////////////////////////////// */
.section-footer {
  padding: 2.4rem;
  color: #ebe1f8;
  font-size: 1.6rem;
  font-weight: 200;

  border-top: solid 1px rgba(119, 119, 119, 0.1);
}

.section-footer .logo-sw {
  width: 4rem;
  opacity: 60%;
}

/* MEDIA */
@media (max-width: 1024px) {
  .section-login,
  .section-singup {
    width: 48vw;
  }
  .logo-sw {
    width: 8rem;
  }
  .header-save {
    font-size: 3.2rem;
  }
  .login-form-box.flex-conteiner,
  .singup-form0box.flex-conteiner {
    width: 40vw;
  }
  .input-box {
    width: 40vw;
  }
}
@media (max-width: 768px) {
  .section-login,
  .section-singup {
    width: 70vw;
    margin: 4.4rem auto;
  }
  .logo-sw {
    width: 7rem;
  }

  .header-save {
    font-size: 3.6rem;
  }
  .login-form-box.flex-conteiner,
  .singup-form0box.flex-conteiner {
    width: 55vw;
  }
  .input-box {
    width: 55vw;
  }
}
@media (max-width: 430px) {
  .section-login,
  .section-singup {
    width: 96vw;
    margin: 2.4rem auto;
    padding: 3.2rem 2.4rem;
  }
  .logo-sw {
    width: 6rem;
  }
  .header-save {
    font-size: 2.4rem;
  }
  .login-form-box.flex-conteiner,
  .singup-form0box.flex-conteiner {
    width: 80vw;
  }
  .input-box {
    width: 80vw;
  }
}

/*  
  - Font size system (px)
    10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
  
  --- 02 Whitespace
  
  - Spacing system (px)
    2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
    */