html {
	--factor: 1.414;
	--hue: 60;
}
body {
	font-size: clamp(1em, 4vw, 1.414em);
	max-width: 30em;
	font-family: "Nara 23";
	padding: 5.5555vh 5.5555vw 22.2222vh;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	font-feature-settings: "case" 1, "liga" 1, "onum" 1;
	overflow-x: hidden;
}
time {
	font-feature-settings: "lnum" 1, "tnum" 1;;
}

h1, h2, h3 {
	font-family: "Maro 4";
	text-wrap: balance;
}

h1 {
	--ideal: calc(  var(--factor) *  var(--factor) * var(--factor) * 1em);
	font-size: clamp( 2.4em, 20.5vw, 6.8em);
	margin-inline: -0.55em;
	margin-block-start: 0;
	position: sticky;
	top: -0.85em;
	white-space: nowrap;
}
h1::before {
	
	content: "Minor Vrede";
	position: absolute;
	left: 50%;
	transform: translateX(-50%) translateY(10%) scale(.9);
	white-space: nowrap;
	color: oklch(80% .25 var(--hue));
	z-index: -1;
}

h2 {
	position: relative;
	font-size: calc( var(--factor) * var(--factor) * 1em);
	align-self: start;
}
h2::before {
	--deg: 1;
	--hue1: calc( var(--hue) + 45 );
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	transform: translateX(-.3em) scale(.9);
	white-space: nowrap;
	background: oklch(80% .25 var(--hue1));
	z-index: -1;
	rotate: calc( var(--deg) * 1deg );
}
h2:nth-of-type(2n)::before {
	--hue1: calc( var(--hue) + 45*2 );
	--deg: -1;
}
h2:nth-of-type(3)::before {
	--hue1: calc( var(--hue) + 45*3 );
}
h2:nth-of-type(4)::before {
	--hue1: calc( var(--hue) + 45*4 );
	--deg: 2;
}
h2:nth-of-type(5)::before {
	--hue1: calc( var(--hue) + 45*5 );
	--deg: -1;
}
h2:nth-of-type(6)::before {
	--hue1: calc( var(--hue) + 45*6 );
	--deg: -2;
}
h2:nth-of-type(7)::before {
	--hue1: calc( var(--hue) + 45*7 );
}
h2:nth-of-type(8)::before {
	--hue1: calc( var(--hue) + 45*8 );
}

h1 + p {
	font-style: italic;
	font-size: clamp(1em, 4.5vw, 1.999em);
	margin-block-start: 0;
}

ul, ol {
	padding-inline: 1em 0;
}

abbr {
	font-feature-settings: "smcp" 1, "c2sc" 1;
}