@font-face {
	font-family: 'Klima';
	src: url('klima-light.woff2') format('woff2');
}

@font-face {
	font-family: 'Klima';
	font-style: italic;
	src: url('klima-light-italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Klima';
	font-weight: bold;
	src: url('klima-bold.woff2') format('woff2');
}

@font-face {
	font-family: 'Klima';
	font-style: italic;
	font-weight: bold;
	src: url('klima-bold-italic.woff2') format('woff2');
}

:root {
	--color: white;
	--background: royalblue;

	--body: 1rem;
	--heading: calc(2 * var(--body));
	--gutter: calc(2 * var(--body));

	font-family: 'Klima', sans-serif;
	font-size: 110%;
	line-height: 133%;
	text-wrap: balance;

	@media (width > 600px) {
		--gutter: calc(4 * var(--body));

		font-size: 133%;
	}
}


body {
	background-color: var(--background);
	block-size: 100vh;
	color: var(--color);
	display: grid;
	font-size: var(--body);
	grid-template-rows: min-content 1fr min-content;



	/* I wanted to have a graph-paper background pattern, without using an image. */
	/* I found this tool: https://css-pattern.com/graph-paper/ */
	/* It uses multiple gradients to draw the lines. I adjusted the variables for my work. */
	--grid-size: calc(6 * var(--body));
	--grid-color: color-mix(in srgb, var(--color) 10%, transparent);

	/* I don’t entirely understand this; I think it is a line? */
	--grid-gradient: #0000 90deg, var(--grid-color) 0;
	--grid-line: 0.5em;

	/* This applies three backgrounds. */
	background:
		conic-gradient(from 90deg at 2px 2px, var(--grid-gradient)),
		conic-gradient(from 90deg at 1px 1px, var(--grid-gradient)),
		var(--background);

	/* And sizes them each. */
	background-size: var(--grid-size) var(--grid-size), calc(var(--grid-size) / 4) calc(var(--grid-size) / 4);
}

header, footer {
	backdrop-filter: blur(0.1em);
	background-color: color-mix(in srgb, var(--color) 20%, transparent);
	letter-spacing: 0.1em;
	padding-block: var(--body);
	padding-inline: var(--gutter);
	text-transform: uppercase;
}

h1 { font-size: var(--heading); }

main {
	align-self: center;
	padding-block: var(--heading);
	padding-inline: var(--gutter);
	display: grid;
	gap: var(--heading);
}

/* Customized link underlines! */
a {
	text-decoration-color: color-mix(in srgb, var(--color), transparent);;
	text-decoration-line: underline;
	text-decoration-skip-ink: none;
	text-decoration-thickness: 0.07em; /* `em` for font-relative. */
	text-underline-offset: 0.12em;
}

ul {
	display: grid;
	gap: var(--body);

	/* Nesting, to only apply to the list ones! */
	a {
		font-weight: bold;
		text-decoration: initial;
	}

	p {
		font-style: italic;
		opacity: 50%;
	}
}