:root {
	--max-inline-size: 40;
	--min-font-size: 0.8;
	--max-font-size: 1.2;
	--min-line-height: 1;
	--max-line-height: 1.6;
	--min-scale: 1;
	--max-scale: 1.6;

	--screen-size: var(--max-inline-size);
	--factor: min(var(--screen-size) / var(--max-inline-size) / var(--max-font-size), 1);
	--font-size: 1;

	--scale: calc(var(--min-scale) + (var(--max-scale) - var(--min-scale)) * var(--factor));
	--base-font-size: calc(var(--min-font-size) + (var(--max-font-size) - var(--min-font-size)) * var(--factor));
}

@supports (opacity: calc(100vi / 1rem)) {
	:root {
		--screen-size: calc(100vi / 1rem);
	}
}

body {
	max-inline-size: calc(var(--max-inline-size) * 1em);
	margin: 2.5em auto;
	padding: 0 1em;
}

:root * {
	font-size: calc(var(--base-font-size) * var(--font-size) * 1rem);
	line-height: calc(var(--min-line-height) + (var(--max-line-height) - var(--min-line-height)) * var(--factor) / var(--font-size));
}

h1 {
	--font-size: calc(var(--scale) * var(--scale));
}

h2 {
	--font-size: var(--scale);
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
	}
}