@font-face {
	font-family: "inknut-antiqua";
	src: url("/blog/assets/fonts/inknut-antiqua-latin-400-normal.woff2");
}

@font-face {
	font-family: "inknut-antiqua";
	src: url("/blog/assets/fonts/inknut-antiqua-latin-700-normal.woff2");
	font-weight: bold;
}

:root {
	--bg: white;
	--fg-0: black;
	--fg-1: color-mix(in hsl, var(--fg-0), transparent 20%);
	--fg-2: color-mix(in hsl, var(--fg-0), transparent 40%);

	max-width: 72ch;
	margin: auto;
	font-family: "Inknut Antiqua", "inknut-antiqua";
	background-color: var(--bg);
	color: var(--fg-2);
	padding: 2ch;
	filter: grayscale(100%);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--fg-0);
}

a {
	color: var(--fg-2);
	text-decoration-style: wavy;

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