.login_section,
.signup_section {

  & .login_content,
  .signup_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg_color_sec);
    border: 0.5rem solid var();
    border-radius: 1rem;
    box-shadow: var(--shadow);
    padding: 10rem 0 10rem 0;
    width: 90%;

    & h2 {
      position: absolute;
      top: 8%;
      left: 50%;
      transform: translate(-50%, 0%);
      color: var(--white);
      font-size: 2.8rem;
      width: 100%;
      text-align: center;
    }

    & form {
      & label {
        font-size: 1.4rem;
        color: var(--white);
      }

      & input,
      select {
        padding: 0.5rem;
        border: 0.1rem solid var(--shadow);
        border-radius: 0.3rem;
        outline: none;
        font-size: 1.4rem;
        transition: all ease-in-out 0.3s;
        margin: 0 0 1rem 0;

        &:focus {
          border: 0.1rem solid var(--black);
          box-shadow: var(--shadow);
          transform: scale(1.02);
        }
      }

      & .login_button,
      .signup_button {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
      }
    }
  }

}


.signup_section {
  & .signup_content {
    padding: 5rem 0 5rem 0;
    top: 4rem;
    transform: translate(-50%, 0%);

    & h2 {
      top: 1rem;
    }
  }
}