@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



html {
  height:100%;
}

body {
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  min-height:100%;
  background-color:white;
  /*font-family: 'Noto Sans', sans-serif;*/
  font-family: 'Lato', sans-serif;
  font-size:10px;
}

header,
footer {
  flex:0 0 auto;
  background-color:white;
  padding:0.5em 1vw;
}

header {
  position:sticky;
  top:0;
  /*
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  */
  z-index:5;
  background-color:rgba(90,125,95,0.9);
  padding: 0 1vw;
}

footer {
  color:#E0F0EA;
  font-size:1.6em;
  text-align: center;
  background-color:rgb(90,125,95);
}

#sitebody {
  flex:1 0 auto;
  padding:0 1vw 5%;
  background-color:#E0F0EA;
}

#mainNavLogo {
  margin-bottom:-0.3em;
}
#mainNavLogo .mainNavLink {
  font-family: 'Shadows Into Light', cursive;
  font-size:2.5em;
  font-weight:bold;
  color:white;
  line-height:1;
  letter-spacing: 0em;
  width:10ch;
  text-align: center;
}
#mainNavLogo .mainNavLink:hover {
  background-color: transparent;
}

#mainNavList {
  list-style: none;
  margin:0;
  padding:0;
	display: flex;
  width:100%;
}

.mainNavItem {
	/* required for logo positioned in center */
	flex-basis: 30%;
  white-space: nowrap;
}

.mainNavLink {
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 1.4em;
  color:rgb(184, 222, 190);
  padding:0.25em 0;
  box-sizing: border-box;
}
.mainNavLink:hover {
  color:white;
  background-color:rgba(0,0,0,0.1);
}

.mainNavItem:first-child,
.mainNavItem:nth-child(n + 3) {
	order: 3;
}

.mainNavItem:nth-child(n + 3) {
	text-align: right;
}

/* margin auto center aligns logo */
.mainNavItem:first-child {
	margin-left: auto;
	margin-right: auto;
	flex-basis: auto;
}




@media (min-width:900px) {

  footer {
    font-size:1.1em;
  }

}