<header class="header">
	<h1>Title</h1>
	<nav class="main-navigation">
		<ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="foo.html">Foo</a></li>
			<li><a href="bar.html">Bar</a></li>
		</ul>
	</nav>
</header>
<aside>
	<h2>Side Navigation</h2>
	<ul>
		<li><a href="">Link 1</a></li>
		<li><a href="">Link 2</a></li>
		<li><a href="">Link 3</a></li>
		<li><a href="">Link 4</a></li>
		<li><a href="">Link 5</a></li>
		<li><a href="">Link 6</a></li>
	</ul>
	<p>
		At vero eos et accusam et justo duo dolores et ea rebum. Stet
		clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
		dolor sit amet.
	</p>
</aside>
<main>
	<h2>Lorem Ipsum</h2>
	<p>
		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
		diam nonumy eirmod tempor invidunt ut labore et dolore magna
		aliquyam erat, sed diam voluptua. At vero eos et accusam et
		justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
		takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
		dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
		eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
		sed diam voluptua. At vero eos et accusam et justo duo dolores
		et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
		est Lorem ipsum dolor sit amet.
	</p>
	<div class="split-2">
		<img src="" class="" />
		<p>
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
			diam nonumy eirmod tempor invidunt ut labore et dolore magna
			aliquyam erat, sed diam voluptua. At vero eos et accusam et
			justo duo dolores et ea rebum. Stet clita kasd gubergren, no
			sea takimata sanctus est Lorem ipsum dolor sit amet.
		</p>
	</div>
</main>
<footer>
	<p>Lorem Ipsum Dolor</p>
</footer>
</body>

:root {
	--paragraph-width: 90ch;
	--sidebar-width: 30ch;
	--layout-s: "header header" "sidebar sidebar" "main main" "footer footer";
	--layout-l: "header header" "main sidebar" "footer footer";
	--template-s: auto auto minmax(100%, 1fr) auto /
		minmax(70%, var(--paragraph-width)) minmax(30%, var(--sidebar-width));
	--template-l: auto minmax(100%, 1fr) auto /
		minmax(70%, var(--paragraph-width)) minmax(30%, var(--sidebar-width));
	--layout: var(--layout-s);
	--template: var(--template-s);
	--gap-width: 1rem;

	--theme-hue: 210deg;
	--theme-sat: 20%;
	--theme-lit-l: 90%;
	--theme-lit-d: 20%;

	--theme-accent-hue: 200deg;
	--theme-accent-sat: 100%;
	--theme-accent-lit-l: 25%;
	--theme-accent-lit-d: 80%;

	--background-color: hsl(
		var(--theme-hue),
		var(--theme-sat),
		var(--theme-lit)
	);

	--font-color: hsl(
		var(--theme-hue),
		var(--theme-sat),
		clamp(10%, calc(100% - (var(--theme-lit) - 47%) * 1000), 95%)
	);

	--accent-color: hsl(
		var(--theme-accent-hue),
		var(--theme-accent-sat),
		var(--theme-accent-lit)
	);

	--accent-contrast-color: hsl(
		var(--theme-accent-hue),
		var(--theme-accent-sat),
		clamp(0%, calc(100% - (var(--theme-accent-lit) - 47%) * 1000), 100%)
	);

	--color-scheme: light dark;

	color-scheme: var(--color-scheme);
}

@media (min-width: 48rem) {
	:root {
		--layout: var(--layout-l);
		--template: var(--template-l);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--theme-lit: var(--theme-lit-d);
		--theme-accent-lit: var(--theme-accent-lit-d);
	}
}

body {
	margin: 0 auto;
	display: grid;
	grid-template: var(--template);
	grid-template-areas: var(--layout);
	grid-gap: var(--gap-width);
	justify-content: center;
	min-height: 100vh;
	max-width: calc(
		var(--paragraph-width) + var(--sidebar-width) + var(--gap-width)
	);
	padding: 0 var(--gap-width);
	background-color: var(--background-color);
	color: var(--font-color);
	font-family: sans-serif;
}

body > header {
	grid-area: header;
}

.main-navigation ul {
	display: flex;
	gap: 1rem;
}

body > aside {
	grid-area: sidebar;
	align-self: start;
}

body > main {
	grid-area: main;
}

body > footer {
	grid-area: footer;
	margin-top: 5rem;
	border-top: 1px solid currentColor;
}

:where(ul) {
	list-style: none;
	padding-left: 0;
}

:where(a[href]) {
	color: var(--accent-color);
}