:root {
	--bg: #f8f9fa;
	--fg: #212529;
	--accent: #212529;
	font-size: 19px;
}
body {
	background-color: var(--bg);
	color: var(--fg);
	font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
	font-size: 1rem;
	font-weight: 400;
	hyphens: auto;
	margin: 0;
	padding: 0;
	text-align: justify;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
header, main, footer {
	padding: 0 1.75rem;
}
a {
	color: var(--accent);
}
strong {
	font-weight: 800;
}
p {
	line-height: 1.5rem;
	margin: .125rem 0;
	text-indent: 1.125rem;
}
h1 {
	color: var(--accent);
	font-size: 3rem;
	hyphens: none;
	line-height: 3rem;
	text-align: center;
}
header p {
	font-size: 1rem;
	font-weight: 600;
	text-indent: initial;
	text-align: center;
}
main p strong {
	font-size: .9rem;
	text-transform: uppercase;
}
footer p {
	color: var(--accent);
	text-align: center;
}
main > p:first-of-type::first-letter {
	initial-letter: 2;
	margin-right: .375rem;
	-webkit-initial-letter: 2;
}
main > p:first-of-type strong {
	color: var(--accent);
}
p:first-of-type, hr + p {
	text-indent: initial;
}
blockquote {
	font-style: italic;
}
blockquote {
	color: var(--accent);
}
hr {
	background-color: transparent;
	border: 0;
	margin: 3rem auto 2.875rem;
	text-align: center;
}
main hr::before {
	color: var(--accent);
	content: "\2020";
	font-size: 1.125rem;
	font-weight: 600;
}
@media (min-width: 640px) {
	header, main, footer {
		margin: 0 3rem;
	}
}
@media (min-width: 768px) {
	header, main, footer {
		margin: 0 5rem;
	}
}
@media (min-width: 1024px) {
	header, main, footer {
		margin: 0 8rem;
	}
}
@media (min-width: 1280px) {
	:root {
		font-size: 20px;
	}
	header, main, footer {
		margin: 0 auto;
		width: 34rem;
	}
}
/*@media (prefer-color-scheme: light) {
	:root {
		--bg: #e3fafc;
		--fg: #343a40;
		--accent: #0b7285;
	}
}*/
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #212529;
		--fg: #ced4da;
		--accent: #ced4da;
	}
	body {
		background-image: url('water-dark.png');
	}
}