.material-symbols-outlined {
  color: #ffffff;
    font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.jura-regular {
    font-family: "Jura", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
  }
  .kanit-regular {
    font-family: "Kanit", serif;
    font-weight: 400;
    font-style: normal;
  }
#planes{
    font-size: 60px;
}

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

  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  .navbar{
    position: sticky;
    top: 0;
  }
  nav{
    background-color: black;
    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: #ffffff;
}
h1, label, h2{
    font-family: Jura;
}
p{
    font-family: Kanit;
}
h3{
    font-family: Jura;
    text-align: center;
}
.foot{
    margin-top: 15vh;
}
form{
    margin-top: 10vh;
    margin-bottom: 10vh;
    border-radius: 1vb;
    display: flex;
    justify-content: center;
    align-self: center;
    flex-direction: column;
    text-align: center;
    align-items: center;
    background-color: #000000;
    text-align: center;
    width: 60vb
  }
  input{
    margin-top: 0vb;
    margin-left: 2vb;
    margin-right: 2vb;
    width: 55vb;
    height: 5vb;
    background-color: rgb(255, 255, 255);
    box-shadow: 4px 4px 5px rgb(34, 34, 34);
    border: 0px;
    color: rgb(0, 0, 0);
    border-radius: 5px;
  }
  
  textarea{
    margin-left: 2vb;
    margin-right: 2vb;
    width: 55vb;
    height: 15vb;
    background-color: rgb(255, 255, 255);
    box-shadow: 4px 4px 5px rgb(31, 31, 31);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 5px;
  }
  .forme{
    display: flex;
    justify-content: center;
  }
  .footie{
    text-align: center;
  }
  .faces{
    width: 5vb;
    display: flex;
    justify-self: center;
  }
  p{
    font-size: large;
  }

  @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;
      }
  }