/* forms 1.0 */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300;500;900&family=Fira+Sans:wght@300;500;700&display=swap');


    :root {
      /* Color Theme Swatches in HSLA */
      --primary-clr: hsl(209, 40%, 15%);
      --second-clr: hsla(217, 33%, 36%, 1);
      --third-clr: hsla(79, 32%, 45%, 1);
      --f-clr: hsla(0, 0%, 24%, 1);
      --orange: hsla(12, 72%, 48%, 1);
      --lt-orange: hsla(12, 79%, 71%, 1);
      --lt-gray: #d0d0d8;

      --dk-orange: rgb(144, 39, 12);

      --grad1: hsl(209, 40%, 48%);
      --grad2: hsl(240, 9%, 83%);

      --f-family: 'Fira Sans', sans-serif;
    }

    *{
box-sizing: border-box;
    }

    body {
  font-family: var(--f-family);
  font-weight: 300;
  background-image: url(../images/04-signup.jpg);
      background-size: cover;
      background-repeat: no-repeat;
}

.headline {
  color: var(--orange);
  font-size: 3em;
  letter-spacing: -3.5px;
  margin-bottom: .5em;
}

.subhead{
font-weight: 300;
  font-size: 2em;
margin-top: 2em;
  color: var(--orange);
  margin-bottom: -.5em;
     margin-top: 3em;

}

p{
margin: 2em 0;

}


    .grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .75em;


      /* Use the grid-auto-rows property to set a default size (height) for all rows.
  grid-auto-rows: minmax(300px, 20vw);
  Note: The grid-template-rows property overrides this property. */

    }

    .formWrapper {
      margin: 0 auto;
      width: min(85%, 950px);
      padding: 2em;
      color: #fff;
      margin-top: 6em;
    }

    .formWrapper h1 {
      color: #fff;
    }

    .inputGroup {
      flex: 1;
    }

    input,
    textarea {
      width: 100%;
      padding: .5em;
      font-size: 1em;
      opacity: .7;
    }

    textarea {
      height: min(100px, 250px);
    }


    input:focus-visible,
    textarea:focus-visible {
      width: 100%;
      opacity: 1;
    }

    label {
      font-size: .85em;
      color: #fff;
      display: block;
      padding: 2em 0 .5em 0;
    }


    ::placeholder {
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
}

.submit {
      padding: .85em 10em;
      margin-top: 2em;
      text-align: center;
      background-color: var(--orange);
      color: #fff;
      border: none;
      border-radius: 5px;
      font-size: 1em;
      font-weight: 300;
      width: 100%;
    }

    .submit:hover {
      background-color: var(--dk-orange);

    }



    @media (max-width: 780px) {
      .grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
      }

    }


    .skinny-logo{
      width: 20%;
      opacity: .6;
      display:block;
      margin: 4em auto 3em auto;

    }


@media screen and (max-width: 480px) {

  body{
background-color: var(--primary-clr);

  }

  h1{
margin-top: 2em;
    margin-bottom: 1em;
  }
  
  .submit{
    padding: .5em 0;
    
  }

      .skinny-logo{
      width: 50%;
      opacity: .3;


    }

}

/* the honeypot */

#title,
label[for=title]{
  display:none;
  visibility:hidden;
  }