:root {
	--primary-color: hsl(304, 70%, 5%);
	--background-color: hsl(304, 70%, 96.1%);
	--middle-color: color-mix(
		in srgb,
		var(--primary-color) 20%,
		var(--background-color)
	);

	--line-thickness: round(0.2rem, 1px);

	font-family: "Hanken Grotesk", sans-serif;
	font-display: swap;
	font-size: 14pt;
	background-color: var(--background-color);
	color: var(--primary-color);
	line-height: 1.6;
}

body {
	padding: 1.5rem;
	box-sizing: border-box;
	width: min(100%, 85ch);
	margin: 1rem auto;
}

header {
	padding-bottom: 1rem;
	border-bottom: var(--line-thickness) solid var(--middle-color);
	h1 {
		margin: 0;
		text-align: center;
	}
	p {
		margin: 0;
		text-align: center;
		font-size: 110%;
	}
}

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

figure {
	figcaption {
		font-style: italic;
		text-align: center;
	}
	& + figure {
		margin-top: 3rem;
	}
}

h2 {
	margin-top: 3em;
}