@charset "utf-8";
/* CSS Document */

/* dropdown nav */
.dropbtn {
  border: 1px solid black;
  background-color: #ffff00;
  color: black;
  padding: -20px;
  position: absolute;
  left: -39px;
  top: 75px;
  font-family:
  
  /* yes, I know this is a lot of fonts, but I want to make sure this button is available to everone */
  
   Arial, Impact, Verdana, 'DejaVu Sans Mono', 'DejaVu Sans Condensed', 'Deja Vu Sans', FreeSans, FreeSerif, FreeMono, 'DejaVu Serif', 'DejaVu Serif Condensed', Tahoma, 'Courier New', 'Times New Roman', 'Bitstream Vera Sans', 'NimbusSanL', 'NimbusRomNo9L', 'Bitstream Charter', 'Bitstream Vera Sans Mono', 'Bitstream Vera Serif', 'Liberation Sans', 'Liberation Serif', 'Liberation Mono';
   
  font-size: 210%;
  font-weight: bold;
  transform: scale(1, 1.2);

  	-o-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
  	border-radius: 4px;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #ffff00;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  left: -43px;
  top: 145px;
  background-color: #ffffd5;
  	opacity: 0.95;
	color: black;
  min-width: 100px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  font-family: Arial;
  display: block;
}

.dropdown a:hover {background-color: #ffff00;}

.show {display: block;}

@media (min-width: 410px) {
  .dropbtn {  padding: 10px;}
}

@media (max-width: 410px) {
  .dropbtn {  padding-top: 10px; padding-bottom: 10px; padding-right: 5px; padding-left: 5px;
   left:-23px; top: 76px; font-size: 150%;}
   
   .dropdown-content {
     left: -20px;
     top: 132px;
}


}