:root {
	--gray-50: #131314;
	--gray-100: #414142;
	--gray-200: #b2b2b3;
	--gray-300: #e3e3e3;
	--blue-50: #0b1422;
	--blue-100: #2d4264;
	--blue-200: #89b4fa;
	--blue-300: #cce7ff;
	--green-50: #0c170c;
	--green-100: #2f482d;
	--green-200: #88c084;
	--green-300: #b7f2b2;
	--red-50: #240d14;
	--red-100: #663141;
	--red-200: #fc93b0;
	--red-300: #ffdae7;
	--teal-50: #0e1614;
	--teal-100: #2e4642;
	--teal-200: #7dbfb4;
	--teal-300: #beede5;

	--font-mono: monospace;
	--font-sans: ui-sans-serif, system-ui, sans-serif;
	
	--spacing: 0.25rem;
	--container: 80rem;

	--text-base: 1rem;
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-lg: 1.125rem;

	--lineheight-base: 1.25;
	--lineheight-lg: calc(var(--lineheight-base) * 1.2);

	color-scheme: light dark;
}

@supports (color: oklch(0% 0 0)) {
	:root {
		--gray-50: oklch(0.1872 0.002 286.2);
		--gray-100: oklch(0.3757 0.0017 286.32);
		--gray-200: oklch(0.7639 0.0014 286.37);
		--gray-300: oklch(0.9158 0 0);
		--blue-50: oklch(0.1904 0.0317 258.97);
		--blue-100: oklch(0.3781 0.0644 259.71);
		--blue-200: oklch(0.7664 0.1113 259.88);
		--blue-300: oklch(0.9158 0.0436 245.12);
		--green-50: oklch(0.19 0.0271 144.42);
		--green-100: oklch(0.373 0.0547 142.66);
		--green-200: oklch(0.7535 0.1026 142.89);
		--green-300: oklch(0.9048 0.1048 142.71);
		--red-50: oklch(0.1977 0.0402 2.11);
		--red-100: oklch(0.3881 0.0782 2.21);
		--red-200: oklch(0.7813 0.1298 2.77);
		--red-300: oklch(0.9229 0.0443 354.83);
		--teal-50: oklch(0.1913 0.0127 177.82);
		--teal-100: oklch(0.3731 0.0305 183.11);
		--teal-200: oklch(0.7572 0.0692 182.78);
		--teal-300: oklch(0.911 0.0495 183.71);
	}
}

:root {
	--color-bg: var(--gray-50);
	--color-fg: var(--gray-300);
	--color-border: var(--gray-100);
	--color-accent: var(--blue-200);
	--color-green: var(--green-200);
	--color-red: var(--red-200);
	--color-teal: var(--teal-200);
}

@media (prefers-color-scheme: light) {
	:root {
		--color-bg: var(--gray-300);
		--color-fg: var(--gray-50);
		--color-border: var(--gray-200);
		--color-accent: var(--blue-100);
		--color-green: var(--green-100);
		--color-red: var(--red-100);
		--color-teal: var(--teal-100);
	}
}

*,
::after,
::before,
::backdrop,
::file-selector-button {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0 solid;
}

html,
:host {
	line-height: var(--lineheight-base);
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
	font-family: var(--font-mono);
	font-feature-settings: normal;
	font-variation-settings: normal;
	font-size: var(--text-base);
	-webkit-tap-highlight-color: transparent;
}

hr {
	height: 0;
	color: inherit;
	border-top-width: 1px;
	margin-top: calc(var(--spacing) * 4);
	margin-bottom: calc(var(--spacing) * 4);
	border-color: var(--color-border);
}

abbr:where([title]) {
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	display: block;
	font-weight: 700;
	letter-spacing: calc(var(--spacing) / 6);
}

h1,
h2 {
	text-transform: uppercase;
	text-wrap: balance;
	max-inline-size: 50ch;
	line-height: var(--lineheight-lg);
}

a {
	color: var(--color-accent);
	-webkit-text-decoration: underline;
	text-decoration: underline;
	cursor: pointer;
}

b,
strong {
	font-weight: 600;
}

code,
kbd,
samp,
pre {
	font-family: var(--font-mono);
	font-feature-settings: normal;
	font-variation-settings: normal;
	font-size: var(--text-base);
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: calc(-1 * var(--spacing));
}

sup {
	top: calc(-2 * var(--spacing));
}

table {
	text-indent: 0;
	border-color: inherit;
	border-collapse: collapse;
}

:-moz-focusring {
	outline: auto;
}

progress {
	vertical-align: baseline;
}

summary {
	display: list-item;
}

ol,
ul,
menu {
	list-style: none;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
	display: block;
	vertical-align: middle;
}

img,
video {
	max-width: 100%;
	height: auto;
}

::selection {
	background-color: var(--color-accent);
	color: var(--color-bg);
}

::-moz-selection {
	background-color: var(--color-accent);
	color: var(--color-bg);
}

body {
	background-color: var(--color-bg);
	color: var(--color-fg);
	max-width: var(--container);
	margin-inline: auto;
	padding: calc(2 * var(--spacing));
}

header.main {
	border-bottom: var(--color-border) 1px solid;
	padding-bottom: calc(2 * var(--spacing));
	margin-bottom: calc(2 * var(--spacing));

	& > :not(h1) {
		font-size: var(--text-xs);
	}
}

nav ul {
	display: flex;

	& > li::after {
		content: "|";
		margin: 0 calc(2 * var(--spacing));
	}

	& > li:last-child::after {
		content: "";
		margin: 0;
	}
}

nav[aria-label="Main"] {
	& > .nav-inner {
		display: flex;
		margin-bottom: calc(4 * var(--spacing));
	}

	& > .nav-inner::after {
		content: '';
		background: repeating-linear-gradient(
		90deg, var(--color-accent), var(--color-accent)
		1px, transparent 0, transparent 8px);
		display: block;
		width: 100%;
		margin-left: var(--text-base);
	}

	ul > li:first-child {
		display: inline-flex;

		a {
			display: inline-flex;
			align-items: center;
			gap: 8px;
		}
	}
}

main ol > li,
main ul > li {
	margin: var(--spacing) 0;
}

main.blog-posts, main.git-repos {
	article {
		margin-bottom: calc(8 * var(--spacing));

		p {
			margin-top: calc(4 * var(--spacing));
			margin-left: calc(4 * var(--spacing));
			font-size: var(--text-sm);
		}

		time {
			font-size: var(--text-sm);
		}
	}
}

main.git {
	table {
		font-size: var(--text-sm);
	}

	a.d,
	a.h,
	a.i,
	a.line {
		text-decoration: none;
	}

	#blob a {
		color: var(--color-border);
	}

	#blob a:hover,
	#blob a:target {
		color: var(--color-accent);
	}

	table thead td {
		font-weight: bold;
	}

	table td {
		padding: 0 0.4em;
	}

	table td {
		vertical-align: top;
		white-space: nowrap;
		padding-top: 0.1em;
	}

	#index tr td:nth-child(2),
	#tags tr td:nth-child(3),
	#branches tr td:nth-child(3),
	#log tr td:nth-child(2) {
		white-space: normal;
	}

	td.num {
		text-align: right;
	}

	pre {
		font-size: var(--text-sm);
	}

	pre a.h {
		color: var(--color-teal);
		font-weight: bold;
	}

	.A,
	span.i,
	pre a.i {
		color: var(--color-green);
	}

	.D,
	span.d,
	pre a.d {
		color: var(--color-red);
	}

	section.git-file {
		padding-top: calc(2 * var(--spacing));

		p {
			font-size: var(--text-sm);
		}
	}
}