/* code to style to top button and footer */
:root {
	--link-color: #A68A64; /* base color for link */
	/* link hover lower opacity */
	--link-active: #875A23; /* color upon click */
	--link-visited: #291C0B;

	/* footer fa fa icon lowers opacity on hover */
	--fa-icons: #A4AC86;
	--footer-color: #2D1807;
}

/* ---------------- scroll to top button ---------------- */
#top_button {
	display: none; /* button hidden by default */
	position: sticky;
	z-index: 1;
	bottom: 145px; /* place the button at the bottom of the page */
	float:right;

	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: var(--fa-icons);
	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: 60px; /* lowers footer below to top button */
	padding-top: 5px;
	padding-bottom: 5px;
	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 ------------------- */