.chewy-regular {
  font-family: "Chewy", system-ui;
  font-weight: 400;
  font-style: normal;
}
.boogaloo-regular {
  font-family: "Boogaloo", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.logo{
    width: 12vb;
}
.logoo{
    width: 85vb;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-self: center;
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

#planes{
    font-size: 60px;
}

body{
    background-color: #91f67f;
}
hr {
    margin: 0px 0;
    height: 3px;
    border: none;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, #0c7714));
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 45%;
    display: flex;
    justify-content: space-around;
  }
  
  li {
    float: left;
    font-size: xx-large;
    font-family: Chewy;
  }
  a:hover{
    background-color: #23ce34;
    transition: 0.3s;
  }

  li a {
    display: block;
    color: #0c7714;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  .navbar{
    position: sticky;
    top: 0;
    z-index: 5;
  }
  nav{
    background-color: #91f67f;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  .spiral{
    height: 10vb;
  }

  .item1 { grid-area: head1; }
.item2 { grid-area: tex1; }
.item3 { grid-area: imag1; }
.item4 { grid-area: head2; }
.item5 { grid-area: tex2; }
.item6 { grid-area: imag2; }
.item7 { grid-area: head3; }
.item8 { grid-area: tex3; }
.item9 { grid-area: imag3; }
.item10 { grid-area: head4; }
.item11 { grid-area: tex4; }
.item12 { grid-area: imag4; }
.item13 { grid-area: head5; }
.item14 { grid-area: tex5; }
.item15 { grid-area: imag5; }

.grid-container {
  display: grid;
  grid-template-areas:
    'head1 head1 head1'
    'tex1 tex1 imag1'
    'head2 head2 head2'
    'imag2 tex2 tex2'
    'head3 head3 head3'
    'tex3 tex3 imag3'
    'head4 head4 head4'
    'imag4 tex4 tex4'
    'head5 head5 head5'
    'tex5 tex5 imag5';
  gap: 10px;
  padding: 10px;
}

.grid-container > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
h1, p, h3, label, h2{
    color: #0c7714;
}
h1, label, h2{
    font-family: Chewy;
}
p, h3{
    font-family: Boogaloo;
}
h3{
    font-family: Jura;
    text-align: center;
}
.foot{
    margin-top: 15vh;
}
.gas{
    position: relative;
    transform: translateY(-100px);
}
  .footie{
    text-align: center;
  }
  .faces{
    width: 5vb;
    display: flex;
    justify-self: center;
  }
  p{
    font-size: xx-large;
  }
.content{
    border-radius: 5vb;
    border: 1vb solid #23ce34;
}
  @media screen and (max-width: 640px){
    nav{
        display: flex;
        flex-direction: column;}
    .spinnyw{
        display: none;
    }
    ul{
        display: flex;
        flex-direction: column; 
    }
    li{
        font-size: small;
    }
    p{
        font-size: x-small;
    }
    .grid-container {
        display: grid;
        grid-template-areas:
          'head1 head1'
          'tex1 imag1'
          'head2 head2'
          'imag2 tex2'
          'head3 head3'
          'tex3 imag3'
          'head4 head4'
          'imag4 tex4'
          'head5 head5'
          'tex5 imag5';
        gap: 10px;
        padding: 10px;
      }
      h1{
        font-size: large;
      }
      input{
        width: 35vb;
      }
      
      textarea{
        width: 35vb;
      }
      form{
        width: 40vb
      }
      .navbar{
        position: static;
      }
  }