@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');
body{margin:0;background:white;color:white;}
body,a{font-family: "Fjalla One";}
header{height:40px;background:#66865F;position:fixed;padding:10px;left:0;right:0;line-height:40px;z-index:1;}
footer{height:20px;background:#66865F;position:fixed;padding:10px;left:0;right:0;bottom:0;line-height:20px;}
section{padding:15px;background:white;color:black;line-height:2;width:400px;}
section.normal{padding:15px;transition:3s;}
section.header{padding-top:75px;}
section.footer{padding-bottom:55px;}
.brand{float:left;font-size:24px;}
nav{float:right;font-size:18px;}
nav>a{color:white;margin:0px 20px;text-decoration:none;}
nav>a.selected{color:#1d1d1d;}
nav>a:hover{color:#1d1d1d;transition:2s;}
.normalText{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;}
.menu{display:inline-block;cursor: pointer;float:right;}

@media only screen and (min-width: 800px) {
section{padding-top:75px;}
}

@media only screen and (max-width: 800px) {
section{width:auto;}
nav{position:fixed;left:0;right:0;top:60px;background-color:#B2D2AA;padding:10px 0;visibility:hidden;opacity:0;transition: visibility 0s linear 1000ms, opacity 1000ms;}
nav.show{visibility:visible;opacity:1;transition: visibility 0s linear 0ms, opacity 1000ms;}
nav>a{display:block;line-height:30px;}
.menu>div{
  width: 35px;
  height: 4px;
  background-color:white;
  margin: 6px 0;
  transition: 0.4s;
}
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-9px, -5px);
  transform: rotate(45deg) translate(-9px, -5px);
}
}