body {
	font-family: 'Fira Code', 'JetBrains Mono', 'Nanum Gothic Coding', monospace;
	max-width: 65rem;
	margin: 3em auto;
	padding: 0 1em;
	line-height: 1.6;
	color: #c0c0c0;
	background-color: #0d0d0d;

	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

header > h1 {
	font-size: 3em;
	text-align: center;
	font-weight: 200;
	margin-bottom: 0;
	color: #e0e0e0;
	text-decoration-line: underline;
	text-decoration-color: #ff3333;
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

header > h2 {
	text-align: center;
	font-weight: 200;
	margin-top: 0.25em;
	color: #777;
}

header > h1::before { content: unset; }
header > h2::before { content: unset; }

h3::before { content: "# "; color: #ff3333; }
h4::before { content: "## "; color: #ff3333; }

h3 {
	color: #e0e0e0;
	border-bottom: 1px solid #222;
	padding-bottom: 0.3em;
}

a {
	color: #ff6666;
	text-decoration: none;
	transition: color 0.2s ease;
}
a:hover {
	color: #ff3333;
	text-decoration: underline;
}
a:visited { color: #cc5555; }

ul { list-style-type: none; padding-left: 0; }
ul > li { padding: 0.25em 0; }
ul > li::before {
	content: "> ";
	color: #ff3333;
	font-weight: bold;
}

time {
	color: #555;
	font-size: 0.85em;
}

footer {
	border-top: 1px solid #333;
	padding-top: 1em;
	margin-top: 3em;
	color: #555;
	font-size: 0.85em;
}
footer a { color: #888; }
footer a:hover { color: #ff3333; }

blockquote {
	border-left: 3px solid #ff3333;
	margin: 1.5em 0;
	padding: 0.5em 1em;
	color: #999;
	font-style: italic;
}

details {
	margin: 0.25em 0;
	padding-left: 1.5em;
}
details summary {
	cursor: pointer;
	color: #999;
	font-size: 0.85em;
	margin-left: -1.5em;
}
details summary:hover { color: #ff6666; }
details summary::marker { color: #ff3333; }
details[open] summary { margin-bottom: 0.25em; }
details ul {
	margin: 0;
	padding-left: 0.5em;
	font-size: 0.85em;
}
details ul > li::before {
	content: "- ";
	color: #555;
	font-weight: normal;
}

::selection {
	background: #ff3333;
	color: #0d0d0d;
}

@media only screen and (max-width: 45rem) {
	header > h1 { font-size: 2em; }
	header > h2 { font-size: 1.1em; }
	footer { font-size: 0.8em; }
}

@media (prefers-color-scheme: light) {
	body {
		color: #222;
		background-color: #f5f5f0;
	}
	header > h1 { color: #111; }
	header > h2 { color: #666; }
	h3 { color: #111; border-bottom-color: #ddd; }
	a { color: #cc2200; }
	a:hover { color: #ff3333; }
	a:visited { color: #993300; }
	ul > li::before { color: #cc2200; }
	footer { border-top-color: #ccc; color: #888; }
	footer a { color: #666; }
	blockquote { border-left-color: #cc2200; color: #666; }
	details summary { color: #666; }
	details summary:hover { color: #cc2200; }
	details summary::marker { color: #cc2200; }
	details ul > li::before { color: #999; }
	::selection { background: #cc2200; color: #fff; }
}