:root {
	--text-color: color-mix(in hsl, white 90%, var(--accent-color) 10%);
	--accent-color: #4f5d2f;
	--harsh-color: #111;
	--border-color: color-mix(
		in hsl,
		var(--accent-color) 70%,
		var(--harsh-color) 30%
	);
	--link-color: color-mix(
		in hsl,
		var(--text-color) 60%,
		var(--accent-color) 40%
	);
	--background-color: color-mix(
		in hsl,
		var(--accent-color) 45%,
		var(--harsh-color) 55%
	);
	--line-thickness: round(0.2rem, 1px);

	--main-padding: 2rem;

	color: var(--text-color);
	background-color: var(--background-color);
	font-family: "Hanken Grotesk", sans-serif;
	line-height: 1.6;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	height: 100vh;
	display: grid;
	grid-template-areas:
		"header header header"
		"nav main _"
		"footer footer footer";
	--left-sidebar-width: 15rem;
	grid-template-columns: var(--left-sidebar-width) 1fr var(--left-sidebar-width);
	grid-template-rows: auto 1fr auto;
}

header {
	grid-area: header;
	display: flex;
	padding: 0.5rem var(--main-padding);
	background-color: var(--border-color);
	margin-bottom: 2rem;
	align-items: center;
	gap: 2rem;

	> a {
		font-size: 150%;
		font-weight: 600;
		display: flex;
		gap: 0.5rem;
	}

	> label {
		display: none;
	}

	position: relative;
	&::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 1rem;
		background: linear-gradient(var(--harsh-color), transparent);
		opacity: 0.3;
	}
}

nav {
	grid-area: nav;
	flex-direction: column;
	padding-left: var(--main-padding);

	> a {
		font-weight: 600;
		font-size: 125%;
		:not(input) + & {
			margin-top: 1rem;
		}
	}

	a {
		opacity: 0.7;
		&:hover {
			opacity: 1;
		}
	}

	> * {
		display: block;
	}
}

main {
	box-sizing: border-box;
	grid-area: main;
	width: min(100%, 60rem);
	padding: 0 var(--main-padding);
	min-width: 0;
	justify-self: center;
}

footer {
	grid-area: footer;
	text-align: center;
	padding: 0.7rem;
	font-size: 80%;
	background-color: var(--border-color);
	margin-top: 2rem;

	position: relative;
	&::before {
		content: "";
		position: absolute;
		bottom: 100%;
		left: 0;
		right: 0;
		height: 1rem;
		background: linear-gradient(to top, var(--harsh-color), transparent);
		opacity: 0.3;
	}
}

a {
	color: var(--link-color);
	text-decoration: none;
	&:hover {
		text-decoration: underline;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}
img + em {
	display: block;
	text-align: center;
	font-style: italic;
}

code {
	font-family: "JetBrains Mono";
}

pre {
	overflow-x: auto;
	max-width: 100%;
}

hr {
	width: 100%;
	background-color: var(--text-color);
}

/* MOBILE STYLES */
/* max-width = 2 * --navbar-width + --main-width */
@media (max-width: 90rem) {
	body {
		grid-template-areas:
			"header"
			"nav"
			"main"
			"footer";
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr auto;
	}

	header {
		margin-bottom: 1rem;
		label {
			display: flex;
			flex-direction: column;
			cursor: pointer;
			align-items: flex-start;
			gap: round(0.5rem, 1px);
			hr {
				display: block;
				width: 2rem;
				height: var(--line-thickness);
				margin: 0;
				border: none;
			}
		}
	}

	nav {
		padding-top: 0;
		margin-bottom: 2rem;
		input:not(:checked) ~ * {
			display: none;
		}
	}
}