:root{
  --background: #DADABE;
  --font: 18px;
}
*{
  margin: 0;
  color: blue;
  font-size: var(--font);
}
body{
  background-color: var(--background);
}
a{
  text-decoration: none;
}
/************** GRID CONTAINERS **************/
.nav-container{
  display: grid;
  border-top: solid thin #000000;
  border-bottom: solid thin #000000;
  height: 12vh;
  background-color: #9FAC84;
  width: 100%;
  position: relative;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  align-content: center;
  justify-content: center;
  grid-template-areas: "home past-grows photos archives currentyear"
}
.main-container{
  margin-top: 10px;
  display: flex;
  grid-template-areas: "ad main-content ad"
}
.home-container{
  display: grid;
  position: relative;
  grid-area: main-content;
  grid-gap: 15px;
  padding-bottom: 7px;
  height: 240vh;
  width: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto repeat(3, 1fr) repeat(2, 200px);
  align-content: center;
  z-index: 2;
  justify-content: center;
  grid-template-areas:"mission mission mission mission mission mission"
                      "seedling seedling seedling early-veg early-veg early-veg"
                      "veg veg veg flower flower flower"
                      "harvest harvest harvest post-harvest post-harvest post-harvest"
                      "curing curing curing curing curing curing"
                      "gender gender insects insects climate climate";
}
.side-container{
  width: 200px;
/*  background-image: url(../images/side.jpg);*/
  background-color: #A7A1AA;
  background-position: top;
  margin: 0px 5px;
  background-size: contain;
  background-repeat: no-repeat;
}
.text-container{
  display: grid;
  position: relative;
  height: auto;
  width: 100%;
  background-color: #72607B;
  padding: 2% 20% 10% 2%;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "text";
}

/**************CHILD ELEMENTS****************/
.nav-child{
  border-right: thin solid #000000;
  border-left: thin solid #000000;
  text-align: center;
  text-transform: uppercase;
}
.home-child{
  text-align: center;
  text-transform: uppercase;
  display: grid;
  border: 3px solid #87649A;
  border-radius: 12px;
  background-color: #947285;
  align-items: center;
  font-size: 150%;
  opacity: 0.9;
  -webkit-transition: opacity .4s ease-in-out;
  -moz-transition: opacity .4s ease-in-out;
  -ms-transition: opacity .4s ease-in-out;
  -o-transition: opacity .4s ease-in-out;
  transition: opacity .4s ease-in-out;
}
.home-child:hover{
  opacity: 1;
  box-shadow: 5px 5px orange;
}
.home-child a{
  height: 100%;
}
.clickable{
  height: 100%;
  width: 100%;
}
.clickable h2{
  font-size: 125%;
  color: #FFFFFF;
}
.text{
  grid-area: text;
}
.text p{
  margin: 3% 5% 2% 0%;
  font-size: 120%;
  color: #FFF;
}
.text h1{
  font-size: 150%;
  color: #FFF;
}
.text a{
  color: yellow;
}
.text-image{
  width: auto;
  min-height: 15vh;
  max-height: 30vh;
  margin: 2%;
  border-radius: 5%;
  border: 1px solid #FFF;
}
/*************** LAYOUT ELEMENTS *************/
.side-fixed{
  position: fixed;
}
.home{
  border-left: 0;
  grid-area: home;
}
.past-grows{
  grid-area: past-grows;
}
.photos{
  grid-area: photos;
}
.archives{
  grid-area: archives;
}
.currentyear{
  grid-area: currentyear;
}
.seedling{
  grid-area: seedling;
  margin: 2% 5%;
  background-image: url(../images/seedling/growth-8.jpg);
  background-position: center;
  background-size: cover;
}
.early-veg{
  grid-area: early-veg;
  margin: 2% 5%;
  background-image: url(../images/vegetation/early-1.jpg);
  background-position: center;
  background-size: cover;
}
.veg{
  grid-area: veg;
  margin: 2% 5%;
  background-image: url(../images/late-vegetation/Erin-29th.jpg);
  background-position: center;
  background-size: contain;
}
.flower{
  grid-area: flower;
  margin: 2% 5%;
  background-image: url(../images/flowering/Sept-20-flower-2.jpg);
  background-position: center;
  background-size: cover;
}
.harvest{
  grid-area: harvest;
  margin: 2% 5%;
  background-image: url(../images/harvest/Sept-22-all-hung.jpg);
  background-position: center;
  background-size: cover;
}
.post-harvest{
  grid-area: post-harvest;
  margin: 2% 5%;
  background-image: url(../images/curing/Oct-12-stack-of-3.2.jpg);
  background-position: center;
  background-size: cover;
}
.mission{
  background-color: #72607B;
  grid-area: mission;
  text-align: center;
  border: 1px solid #FFFFA0;
  margin: 1% 5%;
}
.mission p{
  color: #FFFFFF;
  padding: 1%;
}
.mission h1{
  font-size: 150%;
  margin: 2% 0;
  color: #FFFFFF;
}
.curing{
  grid-area: curing;
  background-image:  url(../images/planting/planting-header.jpg);
  background-position: center;
  background-size: cover;
}
.curing h2, .gender h2, .insects h2, .climate h2{
  text-align: left;
}
.gender{
  grid-area: gender;
  background-image: url(../images/vegetation/male-6.jpg);
  background-position: center;
  background-size: cover;
}
.insects{
  grid-area: insects;
  background-image: url(../images/insects/strange-insects-4.jpg);
  background-position: center;
  background-size: cover;
}
.climate{
  grid-area: climate;
  background-image: url(../images/harvest/Sept-25-lemon-4.jpg);
  background-position: center;
  background-size: cover;
}
.copyright{
  text-align: center;
  width: 100%;
}
/*********** Mobile designs ***********/
.mobile-nav-container{
  display: none;
}
@media only screen and (max-width: 800px){
  /********** Mobile Containers ***********/
  .mobile-nav-container{
    display: grid;
    height: 75px;
    grid-template-columns: 1fr 75px;
    justify-content: flex-end;
    align-items: center;
    grid-template-areas: "... nav-button"
  }
  .main-container{
    margin-top: 10px;
    display: grid;
    grid-template-areas: "ad main-content";
  }
  .nav-container{
    display: none;
  }
  .home-container{
    display: grid;
    position: relative;
    grid-area: main-content;
    grid-gap: 15px;
    height: auto;
    padding-bottom: 7px;
    width: 100%;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr) auto repeat(2, auto);
    align-content: center;
    z-index: 2;
    justify-content: center;
    grid-template-areas:"seedling seedling seedling early-veg early-veg early-veg"
                        "veg veg veg flower flower flower"
                        "harvest harvest harvest post-harvest post-harvest post-harvest"
                        "mission mission mission mission mission mission"
                        "curing curing curing curing curing curing"
                        "gender gender gender gender gender gender"
                        " insects insects insects insects insects insects"
                        "climate climate climate climate climate climate";
  }
  .text-container{
    display: grid;
    position: relative;
    height: auto;
    width: auto;
    background-color: #72607B;
    padding: 2% 5% 2% 2%;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "text";
  }
  .side-container{
    width: 100px;
  }

  .home-child{
    height: 25vh;
  }
  .gender, .curing, .insects, .climate{
    height: 15vh;
  }

/*************** Mobile Inside  Content  ************/
  .nav-button{
    grid-area: nav-button;
    font-size: 120%;
    background-color:lightblue;
  }
  .mission h1{
    font-size: 90%;
  }
  .mission p{
    font-size: 60%;
  }
  .clickable h2{
    font-size: 90%;
  }
  .text-image{
    width: 50vw;
    min-height: 5vh;
    max-height: 30vh;
    margin: 2%;
    border-radius: 5%;
    border: 1px solid #FFF;
  }

/*************** Mobile Nav Content ***************/
  .sidenav{
    overflow-x:hidden
  }
  .sidenav{
    height:100%;
    width:0;
    position:fixed;
    z-index:1000;
    top:0;
    left:0;
    background-color:#111;
    transition:.5s;
    padding-top:60px;
  }
  .sidenav a{
    padding:8px 8px 8px 32px;
    font-size:25px;
    color:#818181;
    display:block;
    transition:.3s;
  }
  .sidenav a:hover{
    color:#f1f1f1
  }

  .sidenav .closebtn{
    position:absolute;
    top:0;
    right:25px;
    font-size:36px;
    margin-left:50px;
  }
  #main{
    transition:margin-left .5s
  }

}
@media only screen and (max-width: 350px){
  .mission h1{
    font-size: 90%;
  }
  .mission p{
    font-size: 60%;
  }
  .clickable h2{
    font-size: 60%;
  }
}