html{
  font-size: 16px;
}

body{
  background-color: #a9cfbe;
  font-family: Bahnschrift, Arial, Courier New;
}

/***HEADER****/

#header{
  background-color: #F3F5E6;
  text-align: center;
  padding: 0.60rem;
  margin: 1.0rem 0.65rem 1rem 0.65rem;
  border-radius: 0.70rem;

}

/***ToP_NAV****/

#top_nav_bar{
  background-color: #F3F5E6;
  padding: 0.0001rem 0.65rem 0.0001rem 0.65rem;
  margin: 0.65rem 0.65rem 1rem 0.65rem;
  border-radius: 0.70rem;
  text-align: center;

}

#top_nav_bar ul{
  padding: 0.65rem;
  margin: 0.65rem;
  list-style-type: none;
  font-size: 0.9rem;

}

#top_nav_bar ul li{
  display: inline-block;

}

#top_nav_bar ul li a{
  text-decoration: none;
  padding: 0.40rem 6rem 0.40rem 6rem;
  background-color: #80C4B8;
  transition: 0.7s ease-in-out;
  border-radius: 1rem;
  font-size: .90em;
  display: inline-block;
  white-space: nowrap;

}

#top_nav_bar a:hover{
  color: #80C4B8;
  background-color: #13705F;
}

/****MAIN****/

#main{
  background-color: #F3F5E6;
  padding: 0.08rem 1rem 1rem 1rem;
  margin: 0.65rem 0.65rem 0.65rem 10.5rem; /*padding-left determined by sidebar's width + margin-left + margin-right + padding-right + padding-left*/
  border-radius: 0.70rem;
  box-shadow: 10px 10px 10px #13705F;
}

/*****HEADERS******/

h1{
  color:#13705F;

}

h2{
  color:#13705F;
  font-size: 1.9rem;
}

h3{
  color:#13705F;
  display: inline;
  position: relative;
  top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
}

/***SIDE NAV***/

.side_nav{
  background-color: #F3F5E6;
  padding: 1.0rem 0.10rem 0.65rem 1rem;
  margin: 0rem 0.85rem 0.65rem 0.65rem; /*Why 0rem for margin-top? When elements are in the flow, their top and bottom
  margins will combine to be half of their total value. But this sidebar is outside the flow, so its margin-top will combine with the nav_bar's margin-bottom, at
  full value. Thus, setting the side_nav's margin-top to 0rem and adding it to the nav_bar's margin-bottom (0.65rem) will give us 0.65rem. */
  border-radius: 0.70rem;
  float: left;
  width: 8rem; /*Always define width when using float:*/
  clear: left; /*the clear: property applies to floats*/
  box-shadow: 4px 4px 6px #13705F;

}

.side_nav p{
  font-size: 0.90rem;
}

/****FOOTER*****/

#footer{
  background-color: #ddeddd;
  padding: 1rem 0.65rem 0.40rem 0.65rem;
  margin: 15rem 0.65rem 0.65rem 0.65rem;
  border-radius: 0.70rem;
  text-align: center;
  font-size: 0.70rem;
}

#footer ul{
  padding: 0.80rem;
  margin: 0.65rem;
  list-style-type: none;
}

#footer ul li{
  display: inline-block;
}

#footer ul li a{
  text-decoration: none;
  padding: 0.45rem 6rem 0.45rem 6rem;
  background-color: #80C4B8;
  transition: 0.7s ease-in-out;
  border-radius: 1rem;
  font-size: .90em;
  display: inline-block;
  white-space: nowrap;

}

#footer ul li a:hover{
  color: #80C4B8;
  background-color: #13705F;
}

/***LINKS*****/

a:link{
  color: #255E51;
}

a:visited{
 color: #8EAD79;
}