/* CSS Mini Reset */

html, body, div, form, fieldset, legend, label
{
 margin: 0;
 padding: 0;
}

table
{
 border-collapse: collapse;
 border-spacing: 0;
}

th, td
{
 text-align: left;
 vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption {font-weight:normal;}

img { border: 0; }

ul {margin:0;text-align: left;padding: 1.5vw}

p {cursor: default;hyphens: none;}

*{}

html{
  font-size: 14pt;
  color: #000;
  overflow: hidden;
  scrollbar-width: none;
}

body{
  display: grid;
  grid-template-columns: 10vw 40vw 40vw 10vw;
  grid-template-rows: 94vh 6vh;
}

a{
  text-decoration: none;
  font-weight: bold;
  color: black;
}

li{list-style-type:none;hyphens: none;}

li>a{color:black;}

#title_intro{
  opacity:1;
  z-index: 10;
  grid-column: 1/3;
  text-align: center;
  font-size: 2.5em;
  line-height: .5;
  padding-top: 1.2vh;
  height:34vh;
  width:36vh;
  border:2px olivedrab solid;
  margin-left: auto;
  margin-right: auto;
  margin-top:24vh;
  filter:blur(1.2px);
  animation: fadeIn 4s ease 1;
}

#title_intro:hover{
  filter:blur(0px);
}

@keyframes fadeIn {
    0%{opacity:0;}
    100%{opacity:1;}
}

.setup{
  background-image: url("https://prods3.imgix.net/images/articles/2016_06/Feature-Image-Need-To-Know-Chopping-Herbs-Technique-Trick-Hack-Cooking-Scissors.jpg");
  background-size:cover;
  background-repeat: no-repeat;
  filter:grayscale(.65);
  font-family: Cabin,sans-serif;
}

.why{
  background-image: url("https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fhealthylivingmarket.com%2Fwp-content%2Fuploads%2F2017%2F01%2Fo-COOKING-WITH-HERBS-facebook.jpg&f=1");
  background-size:cover;
  background-repeat: no-repeat;
  filter:grayscale(.65);
}

.greens{
  background-image: url("https://pixfeeds.com/images/herbs-spices/1280-610434848-holy-basil.jpg");
  background-size:cover;
  background-repeat: no-repeat;
  filter:grayscale(.65);
}

.home{
  background-image: url("https://prods3.imgix.net/images/articles/2016_06/Feature-Image-Need-To-Know-Chopping-Herbs-Technique-Trick-Hack-Cooking-Scissors.jpg");
  background-size:cover;
  background-repeat: no-repeat;
  filter:grayscale(.65);
}

.plants{
  grid-column: 1/3;
  height:89vh;
}

.greens main{
  height:80vh;
  width:75vw;
  top:8vh;
  left:12.5vw;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
}

.herbs{
  position: relative;
  width:50vh;
  height:80vh;
  border-left:2px white solid;
  font-size: 1em;
  background-color: rgba(255,255,255,0.65);
}

.herbs strong{
  color:olivedrab;
  font-weight:normal;
}

.herbs div{
  width:20%;
  height:100%;
  background-color:olivedrab;
  position: absolute;
}

.herbs h1{
  position: absolute;
  writing-mode:vertical-lr;
  color: white;
  font-size: 3em;
  top:2%;
  margin:auto;
  font-family: BioRhyme, cursive;
}

.herbs img{
  object-fit: cover;
  width:80%;
  height:25%;
  position: absolute;
  top: 0vh;
  left:20%;
}

.herbs h3{
  font-size: 1em;
  text-align: center;
  font-family: Cabin, sans-serif;
}

.light{
  position: absolute;
  top:24%;
  left:22.5%;
  width:38%;
  height:10%;
}

.height{
  position: absolute;
  top:24%;
  right:2.5%;
  width:38%;
  height:10%;
}

.soil{
  position: absolute;
  top:35%;
  left:22.5%;
  width:38%;
  height:10%;
}

.type{
  position: absolute;
  top:35%;
  right:2.5%;
  width:38%;
  height:10%;
}

.herbs p{
  position: absolute;
  top:48%;
  left:22.5%;
  width:75%;
  height:50%;
  font-size: .8em;
  line-height: 1.35em;
  font-family:Cabin, sans-serif;
}

.titleBG{
  grid-column: 1/2;
  grid-row: 1/4;
  background-color: olivedrab;
  height:70vh;
  width:10vh;
  position: absolute;
}


.title{
  text-align: center;
  font-weight: bold;
  font-size: 2.5em;
  width:auto;
  margin-bottom: 3vh;
  background-color: olivedrab;
  color:white;
  font-family: BioRhyme,serif;
}

.body{
  text-align: left;
  font-weight: normal;
  font-size: .88em;
  line-height: 1.75em;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-bottom:15vh;
  font-family: Cabin, sans-serif;
}

.blur{
  filter:blur(2px);
  background-color: rgba(255,255,255,.3);
  color:black;
}

/*.blur .body{color:lightgrey;}*/

.blur:hover{
  filter: blur(0px);
  color:black;
}

.blur:hover .body{
  color: black;
}

.blur:hover .title{
  background-color: olivedrab;
  border-color: olivedrab;
  color:white;
}

.left{
  grid-column: 1/2;
  grid-row: 1/-1;
  height:100%;
}

.right{
  grid-column:2/3;
  grid-row: 1/-1;
  height:1fr;
}

.part{
  grid-column: 1/4;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  height:auto;
  color:black;
}

.setupTitle{
  text-align: left;
  font-weight: bold;
  font-size: 3em;
  border-bottom: 4px olivedrab solid;
  padding-left: 4vw;
  padding-right: 4vw;
  margin-top: 0;
  margin-bottom: 0;
  grid-column:1/4;
  grid-row: 1/2;
  font-family: BioRhyme,cursive;
}

.part p{
  grid-column: 1/3;
  width:100%;
}

.part ol,ul{
  grid-column: 1/3;
  width:85%;
  padding-left: 4vw;
  padding-bottom: 5vh;
  list-style-type: circle;
}

.part li{
  margin-bottom: 1vh;
  list-style-type: circle;
  line-height: 1.6em;
  padding-bottom: 2vh;
}

.part img{
  grid-column: 3/4;
  height:auto;
  width:75%;
  margin:auto;
  margin-top:1vw;
  filter:saturate(65%);
  transition: all .3s ease;
  border-radius: 5px;
}

.part img:hover{
  filter:saturate(100%);
}

.main{
  grid-column: 2/4;
  grid-row: 1/-1;
  background-color: rgba(255,255,255,.90);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row: auto;
  grid-auto-flow: row;
  min-height: 100vh;
  grid-gap: 1vw;
  padding-top: 3vw;
  margin-bottom: 6vh;
}

.menu_main{
  grid-column: 2/4;
  grid-row: 2/3;
  position: sticky;
  top:90vh;
  bottom: 0vh;
  left:10vw;
  right:auto;
  margin-top: 5vh;
  height: auto;
  margin-top: 1vh;
  z-index: 100;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
  background-color: #f5faeb;
}

.menu_side{
  position:sticky;
  z-index: 90;
  align-self: center;
  grid-column:4/5;
  height:auto;
  width:auto;
  background-color: rgba(255,255,255,.8);
  margin-left:.5vw;
  border-top:2vh olivedrab solid;
}

.menu_side ul{padding-top:1vh;padding-bottom:1.5vh;padding-left: 1vw;}

.menu_main a{
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  background-color: #f5faeb;
  padding-top: 1vh;
  width:100%;
  height:5vh;
  color:olivedrab;
  transition: all 1s ease;
}

.menu_main a:hover{
  background-color:olivedrab;
  transform:translateY(-1.5vh);
  color:white;
}

.menu_main:hover{
  background-color: olivedrab;
}

.menu_active{
  border-top: .5vh olivedrab solid;
  padding-top: .75vh;
  transform:translateY(-1.5vh);
}

#active{
  position: absolute;
  left:13vw;
  bottom:5.7vh;
  background-color:olivedrab;
  height:5vh;
  width:5px;
  border-radius: 50% 50% 0 0;
  z-index: -1;
  }

  #active::before{
    content: "";
    position: absolute;
    bottom:20px;
    background-color: olivedrab;
    height: 3vh;
    width: 1vh;
    transform: rotate(40deg);
    border-radius: 50% 0 50% 0;
    left: 7px;
  }

  #active::after{
    content: "";
    position: absolute;
    top: 3px;
    background-color: olivedrab;
    height: 3vh;
    width: 1vh;
    transform: rotate(-30deg);
    border-radius: 0 50% 0 50%;
    right:7px;
  }

.menu_section{
  width:1fr;
  height:5vh;
  text-align: center;
}

@media screen and (min-width: 800px) and (max-width: 1200px)
{
  body{
    display: grid;
    grid-template-columns: 15vw 35vw 35vw 15vw;
    grid-template-rows: 94vh 6vh;
  }
}

@media screen and (max-width: 800px)
{
  .menu_side{
    display: none;
  }

  .part img{
    grid-column: 1/4;
    padding-top: 2vh;
    padding-bottom: 1vh;
    grid-row: 2/3;
    object-fit: cover;
    height:65vw;
  }

  .part ol,ul{
    grid-column: 1/4;
    padding-bottom: 2vh;
    padding-left: 7.5%;
    grid-row: 3/4;
  }

    .left{
      grid-column: 1/3;
      grid-row: 1/2;
      height:auto;
    }

    .right{
      grid-column:1/3;
      grid-row: 2/3;
      height:1fr;
      padding-bottom: 15vh;
    }

    .body{
      padding-bottom:0;
    }

    .blur{
      filter: blur(0px);
    }
  }
}