@import url(reset.css);

body{
    background-color: #c4ffbd;
}
nav{
    background-color: #469035;
    height: 10vh;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    text-align: center;
    padding: 10px;
    }

ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
    margin-left: 10vb;
    margin-right: 10vb;
}
li{
    font-size: 4vb;
}
a, h1{
    color: #002d09;
}
h1{
    font-size: 10vb;
    text-align: center;
    margin-top: 4vh;
}
h2{
    font-size: 8vb;
}
p{
    font-size: 4vb;
}
h2, p{
    text-align: left;
    margin-left: 4vb;
    margin-right: 4vb;
    margin-top: 2vh;
}
.item1 { grid-area: text1; }
.item2 { grid-area: img1; }
.item3 { grid-area: img2; }
.item4 { grid-area: text2; }
.item5 { grid-area: text3; }
.item6 { grid-area: img3; }
.item7 { grid-area: img4; }
.item8 { grid-area: text4; }

.grid-container {
  display: grid;
  grid-template-areas:
    'text1 img1'
    'img2 text2'
    'text3 img3'
    'img4 text4';
  gap: 5vb;
  background-color: #c4ffbd;
  padding: 10px;
  margin-top: 2vh;
  margin: 5vb;
}

.grid-container > div {
  background-color: rgba(91, 166, 91, 0.8);
  text-align: center;
  font-size: 30px;
}
@media screen and (min-width: 600px) and (max-width: 1199px){
    li{
        font-size: 3vb;
    }
    h1{
        font-size: 8vb;
        text-align: center;
        margin-top: 4vh;
    }
    h2{
        font-size: 5vb;
    }
    p{
        font-size: 3vb;
    }
    h2, p{
        text-align: left;
        margin-left: 3vb;
        margin-right: 3vb;
        margin-top: 2vh;
    }
    .grid-container {
      gap: 3vb;
      padding: 7px;
      margin-top: 2vh;
      margin: 4vb;
    }
}
@media screen and (max-width: 599px){
    li{
        font-size: 2vb;
    }
    h1{
        font-size: 4vb;
        text-align: center;
        margin-top: 2vh;
    }
    h2{
        font-size: 3vb;
    }
    p{
        font-size: 2vb;
    }
    h2, p{
        text-align: left;
        margin-left: 2vb;
        margin-right: 2vb;
        margin-top: 1vh;
    }
    .grid-container {
      gap: 2vb;
      padding: 4px;
      margin-top: 1vh;
      margin: 2vb;
    }
}