:root {
	--banner-background: #8dc641; /* bright green to match logo */
	--navbar-color: #333d29; /* dark green for navbar base */
	--buttons-color: #414833; /* for the to top button + navbar */
	--button-hover: #C2C5AA; /* for hovering and ambassador dropdown*/
}

/* ------------------ drop down button ------------------ */

.dropdown {
	background-color: var(--buttons-color);
	float: left;
	overflow: hidden;
}


.dropdown .dropbtn {
	font-size: 20px;
	border: none;
	outline: none;
	color: #f2f2f2;
	padding: 16px 16px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
	
}

.dropdown-content {
	/* positions menu + makes it overlay on page */
	display: none;
	position: absolute;
	background-color: black;
	outline-color: var(--navbar-color);
	outline-style: solid;
  outline-width: 2px; /* top, right, bottom, left  */
	width: 222px; 
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown-content a {
	float: none;
	background-color: var(--button-hover);
	color: black;
	padding: 12px 16px; /* width x height */
	text-decoration: none;
	display: block;
	text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
	background-color: var(--button-hover);
	color: black;
}

.dropdown .fa { padding-left:10px; }

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

.dropdown:hover .dropdown-content { display: block; }