@charset "utf-8";
/* CSS Document */*
/* Style the header with a grey background and some padding */
header {
    padding: 0px 5px;
	overflow: hidden;
	background-color: darkgray;
	color: black;
	font-size: 25px;
	text-align: center;
}

footer {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: gray;
	color: white;
	font-size: 0.6em;
	text-align: center;
	clear: left;
}
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 0px 5px;
}

/* Style the header links */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 0px 5px;
  text-decoration: none;
  font-size: 25px;
  border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

/* Change the background color on mouse-over */
.header a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link*/
.header a.active {
  background-color: dodgerblue;
  color: white;
}

/* Float the link section to the right */
.header-right {
  float: right;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}

.topnav {
  overflow: hidden;
  background-color: lightgray;
  }
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}