/* ==================== SIGN UP PAGE STYLES ==================== */

.container {
  margin: 0 auto;
  width: 80%;
  display: flex;
  /* flex-direction: column; */
  gap: 3rem;
}
p.sign-up {
    margin: 0 0 2rem;
}
p.sign-up::before {
    font-size: 1.5rem;
    margin-right: .25rem;
}

#resources::before {
    content: "🎈";
}
#deliver::before {
    content: "🗞️";
}
#ideas::before {
    content: "💡";
}

form {
    padding: 2rem;
    border-radius: .5rem;
    margin-bottom: 2.5rem;
    flex-direction: column;
    gap: 1rem;
}

form > * {
    margin: 0;
}

h2.sign-up, input, .terms-container {
    margin-bottom: 1.5rem;
}
h2.sign-up {
    font-size: 18.72px;
}

label {
    display: block;
    margin-bottom: .5rem;
}

label[for=terms] {
    font-size: 1rem;
    margin-bottom: 0;
}

input {
    width: 100%;
    padding: .75rem;
    font-family: inherit;
    font-size: 1rem;
}

.terms-container {
    align-items: baseline;
}
#terms {
    width: initial;
    margin-right: .5rem;
    margin-top: 0;
}
.terms-link {
    text-decoration: underline;
}

button.cta {
    cursor: pointer;
    border: none;
    width: 100%;
    background: linear-gradient(rgb(41, 163, 215), rgb(0, 110, 255));
    font-size: 1rem;
    font-family: inherit;
    font-weight: bold;
}

#back-btn {
    padding-inline: 1.125rem;
    border: 1px solid #cccc;
    border-radius: .25rem;
    align-self: stretch;
}

/* +++++++++++++++++++++++++++++++++++++++++++++ */

body {
    margin: 0;
    min-width: 20rem; 
    min-height: 100vh;
    position: relative;
    /* optimizes text rendering speed but affects legibility  */
    text-rendering: optimizeSpeed;
  }
  
  #body-sign-up {
    background: linear-gradient(rgb(41, 163, 215), rgb(0, 110, 255));
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .flx-item1 h1 {
    margin-bottom: 1.5rem;
  }

  .sign-up-header {
    margin-top: 1.5rem;
  }

  .flex-item:nth-child(1) {
    color: #fff;
    width: 70%;
  }

  .flex-item:nth-child(2) {
    box-shadow: #333333 1px 1px 12px;
  }
  
  header, main,  footer  {
    width: min(80%, 90rem);
    margin: auto;
  }
  
  main, footer {
    font-size: clamp(1rem, 0.821rem + 0.895vw, 1.25rem);
  }
  
  img {
    display:block;
    max-width: 100%;
  }
  
  ul {
    padding: 0;
    list-style: none;
  }
  
  a {
    text-decoration: none;
  }
  
  /* Flexbox related general properties*/
  .flexbox {
    display: flex;
  }
  .flw-wrap {
    flex-wrap: wrap;
  }
  .jc-sb {
    justify-content: space-between;
  }
  .ai-c {
    align-items: center;
  }
  
  /* Call to Action in Navbar & Main Section */
  .cta {
    display: inline-block;
    color: #fff;
    padding: 1rem 1rem;
    border-radius: .25rem;
  }
  
  .bg-fff {
    background: #fff;
  }

  #login-body {
    background: linear-gradient(rgb(41, 192, 215), rgb(0, 110, 255));
  }

  header#login {
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
  }

  .forgot-password-link {
    display: block;
    text-decoration: none;
    font-size: 1rem;
    margin-left: 6rem;
    margin-bottom: 1rem;
  } 

  #login-body main .container {
    column-gap: 8rem;
  }

  #login-body main {
    display: flex;
    align-items: center;
  }
  
/* FOR TABLET & SMALL SIZE LAPTOPS */
@media (min-width: 48rem) {
    /* ================ SIGN UP PAGE STYLES ================ */
    p.sign-up::before {
        margin-right: .5rem;
    }
}