/* code to style top of page, navigation bar, link styles/colors, and footer:*/
:root {
	--banner-background: #8dc641; /* bright green to match logo */
	--navbar-color: #18220A; /* dark green for navbar base */
	--buttons-color: #415c17; /* for the to top button + navbar */
	--background-color: #CD8C3D; /* lightest tan */
	--link-color: rgba(148, 101, 44, 1.0); /* base color for link */
	/* link hover lower opacity */
	--link-active: #875A23; /* color upon click */
	--link-visited: #291C0B;
	/* footer fa fa icon has hex value for bright green in logo */
	/* footer fa fa icon lowers opacity on hover */
	--footer-background: #23180A;
	--header-border-color: #5A3D1A;
}

/* PSD with background texture/image in the images folder */
body { background-image: url(../images/background.png); }

/* ----------------------- banner ----------------------- */
.page-head {
	/* top of page banner */
	background-image: url(../images/common_duckweed.png);
	position: relative;             
	height: 200px;
}

#logo {
	/* logo from top page banner */
	padding-top: 15px;
	padding-left: 65px;
	max-height: 300px;
	max-width: 300px;
	
}

@media screen and (max-width: 450px) {
	/* queries to change the grid layout on smaller screens */
	.page-head #logo {
		padding-left: 0px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}
/* --------------------- end banner --------------------- */

/* ------------------- top navigation ------------------- */
.topnav {
	/* style the navigation menu */
	position: sticky;
	z-index: 7;
	top: 0px;
	overflow: hidden;
	background-color: var(--navbar-color);
}

.topnav a {
	/* style the links inside the navigation bar */
	float: left;
	background-color: var(--buttons-color);
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 20px;
}

.topnav a:hover {
	/* change the color of links on hover */
	background-color: #ddd;
	color: black;
}

.topnav .icon { display: none; } /* Hide the link that should open and close the topnav on small screens */

.topnav a.active {
	/* Add an active class to highlight the current page */
	background-color: var(--navbar-color);
	color: white;
}

@media screen and (max-width: 800px) {
	/* queries to change the grid layout on smaller screens */
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon {
		float: right;
		display: block;
	}
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
		border-bottom: solid;
		border-bottom: solid;
		border-width: 1px;
		border-color: var(--navbar-color);
	}
}


/* ----------------- end top navigation ----------------- */

/* -------------------- styling links ------------------- */
.container a:link {
	text-decoration: none;
	color: var(--header-border-color);
}

.container a:hover  {
	text-decoration: none;
	opacity: 0.7;
}

.container a:active {
	text-decoration: none;
	color: var(--link-active);
}

.container a:visited {
	text-decoration: none;
	color: var(--header-border-color);
}
/* ------------------ end styling links ----------------- */

/* ---------------- scroll to top button ---------------- */
#top_button {
	display: none; /* button hidden by default */
	position: fixed;
	bottom: 125px; /* place the button at the bottom of the page */
	right: 30px; /* place the button from the right */
	z-index: 99; /* put button on top layer */
	border: none; 
	outline: none; 
	background-color: var(--buttons-color);
	color: white;
	cursor: pointer; /* add a mouse pointer on hover */
	padding: 15px;
	border-radius: 10px;
	font-size: 18px;
}

#top_button:hover { background-color: var(--navbar-color); } /* change color on hover */
/* -------------- end scroll to top button -------------- */

/* ----------------------- footer ----------------------- */
.footer .fa {
	color: #8dc641; /* would like to change banner to darker green, so keeping the bright green hex here */
	font-size: 20px;
	width: 20px;
	text-decoration: none;
	padding-top: 5px; /* space out icons from text */
}

.fa:hover { opacity: 0.7; } /* lower icon opacity upon hover*/

.footer {
	line-height: 1.5;
	margin-top: 45px; /* lowers footer below to top button */
	padding-top: 1px;
	padding-bottom: 1px;
	position: sticky ;
	bottom: 0;
	width: 100%;
	background-image: url(../images/footer.png);
	color: white;
	text-align: center;
}
/* --------------------- end footer --------------------- */

/* -------------- footer styling links ------------------ */
.footer a:link {
	text-decoration: none;
	color: var(--link-color);
}

.footer a:hover  {
	text-decoration: none;
	opacity: 0.7;
}

.footer a:active {
	text-decoration: none;
	color: var(--link-active);
}

.footer a:visited {
	text-decoration: none;
	color: var(--link-visited);
}
/* ---------------- end styling links ------------------- */