:root {
	--white-neutral: #f4f4f9;
	--white-hover: #ececff;
	--black-neutral: #1a1a1c;
	--black-hover: #282833;
	--accent: #7a7a99;

	--primary: var(--black-neural);
	--background: var(--white-neutral);
	--hover-background: var(--white-hover);
}

body {
	color: var(--primary);
	background-color: var(--background);
	padding: 3ch;
	max-width: 80ch;
	margin: 0 auto;
	font-family: system-ui;
	line-height: 1.6;
}

ul {
	list-style-type: "-";
	padding-left: 1.5em;
}

li {
	padding-left: 0.25em;
}

h3 {
	line-height: 1.4;
	font-weight: normal;
	font-size: 1.2rem;
	margin: 1.2rem 0;
}

a {
	color: inherit;
	text-decoration: none;
}

a::after {
	/* copied from https://practicaltypography.com/how-to-use.html */
	position: relative;
	content: "\FEFF°";
	margin-left: 0.1em;
	font-size: 90%;
	top: -0.1em;
	color: var(--accent);
	font-feature-settings: "caps";
	font-variant-numeric: normal;
}

a:hover {
	background: var(--hover-background);
	transition-property: background;
	transition-duration: 0.2s;
}

h2 {
	line-height: 1.2;
	font-size: 1.44rem;
	font-weight: normal;
	margin: 1.44rem 0;
}

h1 {
	line-height: 1.0;
	font-weight: normal;
	font-size: 1.73rem;
	margin: 1.73rem 0;
}


@media (prefers-color-scheme: light) {
	:root {
		--primary: var(--black-neural);
		--background: var(--white-neutral);
		--hover-background: var(--white-hover);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--primary: var(--white-neutral);
		--background: var(--black-neutral);
		--hover-background: var(--black-hover);
	}
}