:root {
	--heading-color: #A15E07;
	--navBackground: #9E3100;
	--emphasis: #A39C14;
	--navHover: #4FA323;
}

header {
	text-align: left;
	padding: 1em;
	background-image: linear-gradient(
		45deg, 
		 black 10%, 
		var(--emphasis) 65%, 
		var(--navHover) 100%);
	& img {
		width: clamp(50px, 10%, 85px);
		float: left;
		padding-right: 1em;
	}
	& h2 {
		color: var(--heading-color);
		font-size: 200%;
		font-family: "perandory", Verdana, sans-serif;
		text-decoration: underline;
	}
	& h3 {
		color: var(--heading-color);
		font-size: 150%;
		font-family: "perandory", Verdana, sans-serif;
		margin-left: 4.4em;
	}
}

main {
	margin-top: .5em;
	margin-bottom: 1em;
	margin-left: .5em;
	padding: 1em;
	& h1 {
		color: var(--heading-color);
		font-family: "perandory", Verdana, sans-serif;
	}
	& h2 {
		margin: .5em;
		color: var(--heading-color);
		font-family: "perandory", Verdana, sans-serif;
		text-decoration: underline;
	}
	& p {
		margin: 1em;
	}
}

footer {
	text-align: center;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

@media only screen and (min-width: 1000px) {
	body{
		text-align: center;
	}
}

@media only screen and (min-width: 810px) {
	html {
		background-color: var(--emphasis);
	}
	body {
		width: 80%;
		text-align: left;
		margin: 1em;
		border: 3px solid black;
		box-shadow: 1px 1px 2px 2px;
		margin-left: 10%;
		margin-right: 10%;
		background-color: white;
	}
}