@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--asterisk-red: #e85c41;
	--content-bg: #FAEBD780;
	--dark-green: #155020;
	--darker-green: #062510;
}

body {
	width: 100vw;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-family: "Noto Sans", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: var(--dark-green);
}

h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
	font-family: "Dela Gothic One", sans-serif;
	font-weight: 400;
	font-style: normal;
}

p, a {
	padding: 0;
	margin: 0;
}

.color-button {
	padding: 0.5rem 1rem;
	border: 0.125rem solid var(--darker-green);
	border-radius: 1rem;
	border-bottom-width: 0.33rem;
	transition: 0.125s;
	font-weight: bold;
	color: white;
	background-color: var(--dark-green);
}

.color-button:hover {
	border-bottom-width: 0.125rem;
	cursor: pointer;
}

.color-button a {
	color: white;
	text-decoration: none;
}

.asterisk {
	color: var(--asterisk-red);
	font-size: 150%;
	font-weight: normal;
	position: relative;
	top: 5px;
	font-family: serif;
}

body > div {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	width: 100%;
}

#head {
	background-image:
		linear-gradient(to right, #fff0, #fffd 30%, #fffd 70%, #fff0),
		url("/images/lake-minnewaska-tall.jpg");
	background-position: center;
	background-size: cover;
	padding: 2rem;
	color: black;
}

#head h1, #head h2 {
	color: var(--dark-green);
}

#nav {
	background-color: var(--dark-green);
}

#nav menu {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
}

#nav li {
	list-style: none;
	padding: 1rem 0;
}

#nav li:hover {
	background-color: var(--darker-green);
	cursor: pointer;
}

#nav a {
	text-decoration: none;
	color: white;
	padding: 1rem 2rem;
}

#content {
	width: 100%;
	padding: 0 clamp(2rem, calc((100vw - 72ch)/2), 100vw);
	margin: 2rem 0;
	background: linear-gradient(white, var(--content-bg) 25%, var(--content-bg) 75%, white);
}

#content > section {
	margin: 1rem 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
}

#foot {
	width: 100%;
	padding: 2rem;
	background-color: var(--dark-green);
	color: white;
}

#foot a {
	text-decoration: none;
	color: white;
}

#foot .sm-icons {
	color: white;
}

.sm-icons {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	width: min-content;
}

.sm-icons > a {
	text-decoration: none;
	color: inherit;
	font-size: 1.5rem;
}

#copyright {
	text-transform: uppercase;
}

@media (max-width: 600px) {
	#nav a {
		text-decoration: none;
		color: white;
		padding: 0 0.75rem;
		font-size: 0.75rem;
	}

}