*{box-sizing:border-box;margin:0;padding:0}

body, html{
height: 100vh;
width: 100%;
margin: 0;
font-size: 1em;
font-weight: 300;
font-family: 'Lato',  sans-serif;
color:white;
/* background-color:rgb(48, 48, 48); */
background-color: #9dae11;
line-height: 2em;
}

/* HEADINGS */
h1 {
font-size: 2vw;
  color: white;
  font-weight: 700;
  line-height: 1.7;
    color: #303030;
}
h2, h3, h4, h5 {
  color: #303030;
  font-weight: 500;
}
h2 {
  font-size: clamp(1.3rem, 3vw, 2rem);
}
h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
}
h4, h5 {
  font-size: clamp(1rem, 2vw, 1.3rem);
}
/* TEXT + LINKS */
p {
  font-size: 1em;
}
a {
  color: white;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* IMAGE STYLING */
img {
  width: 100%;
  height: auto;
}

li{
 padding-top: 10px;
}




.wrapper{
display: grid;
grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
grid-template-areas:
/* STACKED **/ 
"header"
"guide-intro"
;
}
/*MOBILE END */



/*LARGER SCREENS ONLY*/
@media  only screen and (min-width: 1281px){
.wrapper{
display: grid;
grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
grid-template-areas:
" header     header  header        header "
" . guide-intro  guide-intro  . "
;
}
}



.guide-intro{
 grid-area: guide-intro;


}





.edu-corner {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

.edu-block {
  margin-bottom: 40px;

  padding: 20px;
  border-radius: 8px;
}


.edu-block h3 {
  margin-bottom: 10px;

}

.edu-block p, .edu-block ul {
  font-size: 1em;

  line-height: 1.6;
}




header{
  grid-area: header;
  min-height: 90px;
}



/*NAVIGATION*/


.nav {
height: 90px;
width: 100%;
background-color:rgb(48, 48, 48);
position: fixed;
color: white;
z-index: 555;
}

.nav > .nav-header {
display: inline;
margin-right: 20px;
}

.nav > .nav-header > .nav-title {
  display: inline-block;
  font-size:16px;
  color: white;
  padding: 20px 10px 10px 10px;
  }

.nav > .nav-btn {
display: none;
}

.nav > .nav-links {
display: inline;
float: right;
font-size: 17px;
}

.nav > .nav-links > a {
display: inline-block;
padding: 3px 40px 5px 10px;
text-decoration: none;
color: white;
}

.nav > .nav-links > a:hover {
background-color: #36454F;
color: white ;
z-index: 1;
}
.nav > #nav-check {
display: none;
}

@media (max-width:1080px) {
.nav > .nav-header > .nav-title {
display: inline-block;
font-size:16px;
color: #eeeae2;
padding: 10px 10px 10px 10px;
}
.nav > .nav-btn {
display: inline-block;
position: absolute;
right: 40px;
top: 10px;
z-index: 1;
}
.nav > .nav-btn > label {
display: inline-block;
width: 50px;
height: 50px;
padding: 13px;
}
.nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
background-color: rgba(0, 0, 0, 0.3);
}
.nav > .nav-btn > label > span {
display: block;
width: 25px;
height: 10px;
border-top: 2px solid #eee;
}
.nav > .nav-links {
position: absolute;
display: block;
width: 100%;
background-color: #9EA791;
height: 0px;
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 50px;
left: 0px;
z-index: 1;
color: white;
}
.nav > .nav-links > a {
display: block;
width: 100%;
}
.nav > #nav-check:not(:checked) ~ .nav-links {
height: 0px;
}
.nav > #nav-check:checked ~ .nav-links {
height: calc(100vh - 50px);
overflow-y: auto;
}
}