@font-face {
	font-family: 'Armageda Wide';
	src: url('/fonts/ArmagedaWide.woff2') format('woff2'),
	url('/fonts/ArmagedaWide.woff') format('woff'),
	url('/fonts/ArmagedaWide.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	--primary-bg-color: #e6e6e6;
	--primary-fg-color: #111111;
	--masthead-font: "Armageda Wide";
	--header-font: "Rock Salt";
	--body-font: "Open Sans";
}

/* 1.125 ("major second") */
body {
	background: var(--primary-bg-color);
	color: var(--primary-fg-color);

	font-family: var(--body-font), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.500rem;

	margin: 0;
	padding: 1.500rem;
	min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 1.500rem;
}

h2, h3, h4, h5, h6 {
	font-family: var(--header-font);
}

h1 {
	font-family: var(--masthead-font), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 6.583rem;
	line-height: 7.500rem;
	text-transform: uppercase;
}

h2 {
	font-size: 1.802rem;
	line-height: 3.000rem;
}

h3 {
	font-size: 1.602rem;
	line-height: 3.000rem;
}

h4 {
	font-size: 1.424rem;
	line-height: 3.000rem;
}

h5 {
	font-size: 1.266rem;
	line-height: 3.000rem;
}

h6 {
	font-size: 1.125rem;
	line-height: 1.500rem;
}

p {
	margin: 0 0 1.500rem;
}

small {
	font-size: 0.889rem;
	line-height: 1.500rem;
}

section>p:first-of-type,
article>p:first-of-type {
	text-indent: 2em;
}

section>p:last-of-type,
article>p:last-of-type {
	margin-bottom: 3.000rem;
}

a {
	color: var(--primary-fg-color);
	text-decoration: none;
}

a:link {
	text-shadow:
	-2px 1px 0px rgba(255,255, 255,0.5),
	1px -2px 0px rgba(0, 0, 0, 0.8);
}

a:active {
	border: 1px ridge var(--primary-fg-color);
	border-radius: 50px / 50%;
	transition-delay: 0.100s;
}

a:hover, a:focus {
	background-image: linear-gradient(
	to right,
	rgba(255, 255, 0, 0.1),
	rgba(255, 255, 0, 0.9) 4%,
	rgba(255, 255, 0, 0.1)
	);
	transition-delay: 0.100s;
}

a:visited {
	border: 1px ridge var(--primary-fg-color);
	border-radius: 50px / 50%;
	background-image: linear-gradient(
	to right,
	rgba(255, 255, 0, 0.1),
	rgba(255, 255, 0, 0.9) 4%,
	rgba(255, 255, 0, 0.1)
	);
	transition-delay: 0.100s;
	transition-delay: 0.100s;
}

ul, ol {
	margin: 0 0 1.500rem;
	padding-left:1.500rem;
}

li {
	margin-bottom: 0.750rem;
}

dl {
	margin: 0 0 1.500rem;
}

dt {
	font-weight: bold;
	margin-top: 0.750rem;
}

dd {
	margin: 0 0 0.750rem;
}

header {
	margin-bottom: 3.000rem;
}

footer {
	margin-top: 3.000rem;
}

footer p#silly-fine-print {
	line-height: 1.500rem;
	margin: 0;
	text-align: right;
}

section {
	margin-bottom: 3.000rem;
}

#site-masthead {
	text-align: center;
}

#site-masthead h1 {
	margin-bottom: 0;
}

#site-masthead p {
	font-size: 0.889rem;
	line-height: 1.500rem;
	margin-top: -1.500rem;
	margin-bottom: 1.500rem;
}

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.500rem 1.000rem;
	background: var(--primary-fg-color);
	color: var(--primary-bg-color);
	text-decoration: none;
	transform: translateY(-100%);
	transition: transform 0.2s;
	z-index: 100;
}

.skip-link:focus {
	transform: translateY(0);
}

@media screen and (min-width: 320px) {
	h1 {
		-webkit-text-stroke: 2px var(--primary-fg-color);
		-webkit-text-fill-color: var(--primary-bg-color);
		filter: drop-shadow(-4px -4px);
	}
}

/* 1.200 ("minor third") */
@media screen and (min-width: 425px) {
	h1 {
		font-size: 8.920rem;
		line-height: 9.000rem;
	}

	h2 {
		font-size: 2.488rem;
		line-height: 4.500rem;
	}

	h3 {
		font-size: 2.074rem;
	}

	h4 {
		font-size: 1.728rem;
	}

	h5 {
		font-size: 1.440rem;
	}

	h6 {
		font-size: 1.200rem;
	}

	small {
		font-size: 0.833rem;
	}
}

/* 1.250 ("major third") */
@media screen and (min-width: 640px) {
	body {
		background-image:
		radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.14) 1px, transparent 0),
		radial-gradient(circle at 2px 2px, rgba(0, 0, 0, 0.08) 1px, transparent 0),
		radial-gradient(circle at 0.5px 0.5px, rgba(255, 255, 255, 0.10) 1px, transparent 0),
		linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.06));
		background-size: 4px 4px, 6px 6px, 2px 2px, 20px 20px, 100% 100%;
		background-blend-mode: multiply;
	}

	h1 {
		font-size: 14.553rem;
		line-height: 13.500rem;
		-webkit-text-stroke: 4px var(--primary-fg-color);
		-webkit-text-fill-color: var(--primary-bg-color);
		filter: drop-shadow(-8px -8px);
	}

	h2 {
		font-size: 3.052rem;
		line-height: 6.000rem;
	}

	h3 {
		font-size: 2.441rem;
		line-height: 4.500rem;
	}

	h4 {
		font-size: 1.953rem;
	}

	h5 {
		font-size: 1.563rem;
	}

	h6 {
		font-size: 1.250rem;
	}

	#site-masthead p {
		letter-spacing: 0.250rem;
	}

	small {
		font-size: 0.800rem;
	}
}

/* 1.333 ("perfect fourth") */
@media screen and (min-width: 768px) {
	h1 {
		font-size: 17.713rem;
		line-height: 19.500rem;
	}

	h2 {
		font-size: 4.209rem;
		line-height: 7.5rem;
	}

	h3 {
		font-size: 3.157rem;
	}

	h4 {
		font-size: 2.369rem;
	}

	h5 {
		font-size: 1.777rem;
	}

	h6 {
		font-size: 1.333rem;
	}

	#site-masthead p {
		letter-spacing: 0.400rem;
		margin-top: -3.000rem;
	}

	small {
		font-size: 0.750rem;
	}
}

@media screen and (min-width: 40em) {
	main {
		max-width: 40em;
		margin-left: auto;
		margin-right: auto;
	}