@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap');
body{
    font-family: Outfit, sans-serif;
}
form{
    width:90%;
    margin:0 auto;
    font-family: Outfit, sans-serif;
}
label{
    display:block;
    margin:1em 0 .2em;
  }
  /* single-line text, checkbox, and button */
  input, select, textarea{
    display:block;
    width:100%;
    padding:.3em;
    font-size:20px;
    background-color:#fbfbfb;
    border:solid 1px #CCC;
    resize:vertical;
    color: #000;
  }
  textarea{
    min-height:180px;
  }
  select{
    color:indigo;
  }
  option{
    color:blue;
    background: lavenderBlush;
  }
  input[type=checkbox]{
    display:inline;
    width:auto;
    color:red;
  }
  
  input[type=submit]{
    background-image: linear-gradient(
        90deg,
        rgb(222, 200, 128),
        rgb(255, 255, 255) 27%,
        rgb(255, 57, 128) 57%,
        rgb(130, 125, 237)
      );
    margin:1em 0 0;
    color:white;
    border:none;
    border-radius:8px;
    transition:all .3s ease-out;
  }
  
  input:focus,
  input:hover,
  select:focus,
  select:hover,
  textarea:focus,
  textarea:hover{
    background: #f5f5f5;
  }
  
  /* hover and focus states */
  input[type=submit]:hover,
  input[type=submit]:focus{
    background-image: linear-gradient(
        90deg,
        rgb(222, 200, 128),
        rgb(255, 255, 255) 27%,
        rgb(255, 57, 128) 57%,
        rgb(130, 125, 237)
      );
    outline:none;
  }
  
  @media screen and (min-width:600px) {
    /*  make the form 2 columns */
    form:after{
      content:'';
      display:block;
      clear:both;
    }
    .column{
      width:50%;
      padding:1em;
      float:left;
    }
  }
  .button{
    background-image: linear-gradient(
      90deg,
      rgb(222, 200, 128),
      rgb(255, 255, 255) 27%,
      rgb(255, 57, 128) 57%,
      rgb(130, 125, 237)
    );
    border:none;
    border-radius:8px;
    text-align: center;
    color: white;
    padding: 10px 20px;
    width: 100%;
    height: 50px;
  }
  .button:hover{
    background-image: linear-gradient(
      90deg,
      rgb(222, 200, 128),
      rgb(255, 255, 255) 27%,
      rgb(255, 57, 128) 57%,
      rgb(130, 125, 237)
    );
    color: white;
    cursor: pointer;
  }