html {
	--theme-hue: 0;
	--accent-hue: 315;

	--text-color-richer: hsl(var(--theme-hue), 0%, 5%);
	--text-color-normal: hsl(var(--theme-hue), 0%, 15%);
	--text-color-soft: hsl(var(--theme-hue), 0%, 40%);
	--text-color-softer: hsl(var(--theme-hue), 0%, 70%);
	--text-color-invert: hsl(var(--theme-hue), 0%, 100%);

	--text-color-photo-overlay: #fff;
	--text-color-code-string: #0c87c9;
	--text-color-code-func: #e9950c;
	--text-color-code-var: #df3079;
	--text-shadow-color: rgba(0, 0, 0, 0.4);
	--text-complete-color: #1b9423;
	--text-incomplete-color: #d12d2d;

	--svg-background: hsl(var(--theme-hue), 0%, 100%);
	--flashcard-background: rgba(0, 0, 0, 0.85);
}

@media (prefers-color-scheme: dark) {
	html {
		--theme-hue: 0;
		--accent-hue: 315;

		--text-color-richer: hsl(var(--theme-hue), 0%, 95%);
		--text-color-normal: hsl(var(--theme-hue), 0%, 85%);
		--text-color-soft: hsl(var(--theme-hue), 0%, 60%);
		--text-color-softer: hsl(var(--theme-hue), 0%, 40%);
		--text-color-invert: hsl(var(--theme-hue), 0%, 0%);

		--svg-background: hsl(var(--theme-hue), 0%, 80%);
	}
}

body {
	font-family: 'Lato', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: var(--text-color-normal);
	font-size: 2.3rem;
	font-weight: 300;
}
h1 {
	font-family: 'Kimchistyle', serif;
	font-weight: 500;
	font-style: normal;
	font-size: 14.4rem;
	color: var(--text-color-richer);
}
h1.hero {
	width: 100%;
	margin-top: 7rem;
}
h2,
h3 {
	font-size: 2.3rem;
	font-weight: 400;
	color: var(--text-color-richer);
}
h3 {
	font-size: 2.2rem;
}
h2 span,
h3 span {
	display: inline-block;
	position: relative;
	top: -0.2rem;
	width: 3rem;
	height: 3rem;
	margin: 0 0.3rem 0 0;
	line-height: 2.8rem;
	border-radius: 0.6rem;
	font-size: 2rem;
	color: var(--text-color-invert);
	text-align: center;
	background: var(--text-color-softer);
}
h3 span {
	width: auto;
	height: 2.8rem;
	padding: 0 0.76rem;
	line-height: 2.6rem;
	border-radius: 0.5rem;
	font-size: 1.8rem;
	letter-spacing: 0.001rem;
}
h2 span span,
h3 span span {
	display: none;
}
p.subhead {
	color: var(--text-color-soft);
	font-size: 1.95rem;
	margin: -5.8rem 0 2rem;
}
table {
	width: 100%;
}
table thead th {
	color: var(--text-color-softer);
}
table th.number,
table td.number {
	text-align: right;
}

a {
	text-decoration: none;
}
figure {
	margin: 0 0 2rem;
}
figcaption {
	font-size: 1.4rem;
	color: var(--text-color-softer);
	text-align: center;
}
img.svg {
	background: var(--svg-background);
	border-radius: 0.8rem;
}
ul,
ol {
	padding-left: 3rem;
	list-style-position: outside;
}
ul {
	list-style-type: disc;
}
::marker {
	color: var(--text-color-softer);
}
code {
	font-size: 1.5rem;
	white-space: normal;
	color: var(--text-color-richer);
}
code .string {
	color: var(--text-color-code-string);
}
code .func {
	color: var(--text-color-code-func);
}
code .var {
	color: var(--text-color-code-var);
}

.container {
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
.grid-container {
	padding: 0;
	grid-gap: 0 20px;
	gap: 0 20px;
}
.grid-container p {
	text-align: left;
}

.footer {
	text-align: center;
	color: var(--text-color-softer);
}

@media (max-width: 960px) {
	h1.hero {
		margin-top: 0;
	}
}
@media (max-width: 810px) {
	body {
		font-size: 2rem;
	}
	h1 {
		font-size: 7rem;
	}
	h1.hero {
		margin-top: 0;
	}
	p.subhead {
		margin-top: -3.7rem;
		width: 35rem;
		font-size: 1.65rem;
	}
	h2 {
		font-size: 2rem;
	}
	table th,
	table td {
		font-size: 1.6rem;
	}
}

@media (max-width: 400px) {
	h1.hero {
		margin-top: 1rem;
		font-size: 6.2rem;
		line-height: 0.7;
	}
	p.subhead {
		margin-top: -2rem;
		width: 30rem;
		font-size: 1.45rem;
	}
}

@media (max-width: 359px) {
	p.subhead {
		margin-top: 0;
		width: 100%;
	}
}