:root {
	background-color: oklch(0% 0 0);
	font-family: var(--font);
	color: var(--text);
	color-scheme: dark;
	line-height: 1.15;

	--font:
		-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
		helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica,
		arial, sans-serif;
	--hover: oklch(92% 0 0);
	--text: oklch(84% 0 0);
	--c1: darkslategrey;
}

* {
	box-sizing: border-box;

	&::selection {
		background-color: var(--c1);
	}
}

body,
h1,
h2,
h3 {
	margin: 0;
}

a {
	color: var(--text);

	&:hover {
		color: var(--hover);
	}

	&:focus-visible {
		background-color: var(--c1);
		outline: none;
	}
}

.index {
	padding: max(3em, 7%) max(1.5em, 12%);

	h1 {
		letter-spacing: 0.02em;
		font-size: 1.2em;
		font-weight: 600;
		text-decoration: var(--c1) underline double;
		-webkit-text-decoration: var(--c1) underline double;
	}

	.text {
		font-size: 1.2em;
		margin: 2em 0;

		i {
			font-stretch: 120%;
		}
	}

	.links {
		display: flex;
		gap: 0.5em;

		a {
			font-size: 0.8em;
		}
	}
}