:root {
	color-scheme: light dark;
	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		sans-serif;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	--page: #ffffff;
	--surface: #f3f5f7;
	--text: #20252b;
	--muted: #59636e;
	--link: #0759a5;
	--border: #d8dee5;
}

@media (prefers-color-scheme: dark) {
	:root {
		--page: #171a1f;
		--surface: #22272e;
		--text: #e6edf3;
		--muted: #a1acb8;
		--link: #8ab4f8;
		--border: #39424e;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--page);
	color: var(--text);
	font-size: 1rem;
	line-height: 1.65;
}

.site-header,
.site-footer {
	width: 100%;
	background: var(--surface);
}

.site-header {
	border-bottom: 1px solid var(--border);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	color: var(--text);
	text-decoration: none;
}

.site-nav a:hover {
	text-decoration: underline;
}

.header-inner,
.footer-inner {
	width: min(75%, 72rem);
	margin-inline: auto;
	padding: 1rem 0;
	min-height: 65px;
}

.footer-left {
	color: var(--muted);
	float: left;
}

.footer-right {
	color: var(--muted);
	float: right;
}

.site-title {
	color: var(--text);
	font-size: 1.1rem;
	font-weight: 650;
	text-decoration: none;
}

.content {
	width: min(75%, 72rem);
	min-height: 65vh;
	margin: 0 auto;
	padding: 2.5rem 0 4rem;
}

h1,
h2,
h3 {
	line-height: 1.25;
}

h1 {
	margin-top: 0;
}

h2 {
	margin-top: 2rem;
}

a {
	color: var(--link);
}

a:hover {
	text-decoration-thickness: 2px;
}

code,
pre {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

code {
	padding: 0.1em 0.3em;
	border-radius: 0.25rem;
	background: var(--surface);
}

pre {
	overflow-x: auto;
	padding: 1rem;
	border: 1px solid var(--border);
	border-radius: 0.4rem;
	background: var(--surface);
}

pre code {
	padding: 0;
	background: transparent;
}

blockquote {
	margin-inline: 0;
	padding-left: 1rem;
	border-left: 3px solid var(--border);
	color: var(--muted);
}

.site-footer {
	border-top: 1px solid var(--border);
	color: var(--muted);
}

@media (max-width: 640px) {

	.header-inner,
	.footer-inner,
	.content {
		width: 88%;
	}

	.content {
		padding-top: 1.75rem;
	}
}

.hidden {
	display: none;
}