body {font-size: 1em; font-family: Tahoma, Arial, Helvetica, sans-serif; background-color: #494848; background-image: url(images/background4.png)}
h1 {font-size: 1.8em; font-family: Tahoma, Arial, Helvetica, sans-serif;}
h2 {font-family: font-family: Tahoma, Arial, Helvetica, sans-serif;}
.floatright {float: right;}
.floatleft {float: left;}
.active {
  background-color: #04AA6D;
}
img.floatleft {margin: 0 10px 10px 0; border: solid 2px; border-color: red;}
img.floatright {margin: 0 0 10px 10px; border: solid 2px; border-color: red;}
mark, strong, em {color: black; font-weight: bold;}

*{box-sizing: border-box; margin: 0; padding: 0;}
#div1 {background-color: grey; padding: 0em; border-radius: 8px;}
#div2 {background-color: rgba(255, 255, 255, 0.85); padding: 0.3em 1em; min-height: 590px;  border-radius: 8px;list-style-position: inside; }
#div3 {background-color: grey; padding: 1em; border-bottom: solid 10px; border-color: red;  border-radius: 8px;}
#Firstheading {font-size: 2.9em}

#this-graph {
   color: #e3e3e3;
}

.menu {
   list-style: none;
   background-color: #333; 
   border-radius: 8px;
}

.header {
   top: 0;
   width: 100%;
   background-color: #333;
   position: sticky;
   padding: 0px 0px;
}

.header a {
   text-decoration: none
}

.navbackgr {
   display: inline-block;
   margin-left: 0px;
   min-height: 60px;
}

.nav {
   position: sticky; 
   border-radius: 8px;
   background-color: #333; 
   list-style-type: none; 
   max-height: 0px;
   margin: 0 auto; 
   padding: 0; 
   overflow: hidden;
   width: 100%;
   height: 100%;
}

.nav a {

}

.burger {
   float: right;
   padding: 30px 20px;
}

.menu a {
   display: block;
   padding: 18px;
   color: white;
   border-radius: 8px;
   border: 2px solid grey;
   background-color: #333;
}

.menu :hover {
   background-color: #494848;
   border-radius: 8px;
}
.menu :active {
   background-color: lightblue;
   border-radius: 8px;
}

.burgericon {
   height: 2px;
   width: 26px;
   background: white;
   display: block;
   position: relative;

}

li a:hover {
  background-color: #111;
}


img {
   max-width: 100%;
}

.fill {
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
}
.fill img {
   flex-shrink: 0;
   min-width: 100%;
   min-height: 100%
}

.burgericon::before,.burgericon::after {
   width: 100%;
   height: 100%;
   background: white;
   transition: all .1s ease-out;
   content: '';
   display: block;
   position: absolute;
}

.respmenu:checked ~ .burger .burgericon {
   background: transparent;
}

.respmenu:checked ~ .burger .burgericon::before {
   transform: rotate(-45deg);
   top:0;
}

.responsive {
   width: 100%;
   height: auto;
}

.respmenu:checked ~ .burger .burgericon::after {
   transform: rotate(45deg);
   top:0;
}

.respmenu:checked ~ nav {
   max-height: 100%;
}

.respmenu {
   display: none;
}

.burgericon::before {
   top: 6px;
}

.burgericon::after {
   top: -6px;
}

@media (min-width: 768px) {
   .nav {
      position: relative;
      position: relative;
      float: left;
      max-height: none;
      top: 0;
      width: fit-content;
   }

   .header {
      border-radius: 8px;
   }
   
   .burger {
      display: none;
   }
   .menu a {
      padding: 18px   
   }
   .menu li {
      float: left;
   }
}

@media (min-width: 1024px) {
   .nav {
      position: relative;
      float: left;
      width: fit-content;
      max-height: none;
      top: 0;
   }

   .header {
      border-radius: 8px;
   }
    
   .menu a {
      padding: 18px 67px   
   }
   .burger {
      display: none;
   }
   
   .menu li {
      float: left;
   }
}

#wrapper {
   max-width:  1024px; 
   min-width: 300px; 
   margin: 0 auto;  
   border-radius: 10px;
}