header {
	max-width: var(--max-content-width);
	width: 100%;
	padding: var(--sp-M) var(--sp-L);
	gap: var(--sp-L);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
header a {
	text-decoration: none;
	color: var(--fg-norm);
}
header b {
	font-size: 1.25rem;
}
header img {
	height: 6rem;
}
header > a {
	gap: var(--sp-M);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
header section {
	height: fit-content;
	display: block;
}
header label {
	width: 2rem;
	height: 2rem;
	outline-offset: var(--sp-XS);
	display: grid;
	place-items: center;
	cursor: pointer;
}
#checkbox-navigation {
	position: absolute;
	z-index: -1;
	opacity: 0;
	justify-self: center;
	align-self: center;
}
#navigation, #navigation::before, #navigation::after {
	position: absolute;
	width: 2rem;
	height: .125rem;
	background-color: var(--fg-norm);
	transition: transform .3s;
}
#navigation::before {
	content: '';
	transform: translateY(-.625rem);
}
#navigation::after {
	content: '';
	transform: translateY(.625rem);
}
#checkbox-navigation:focus ~ label {
	outline: .125rem solid var(--fg-norm);
}
#checkbox-navigation:checked ~ label #navigation {
	transform: rotate(45deg);
}
#checkbox-navigation:checked ~ label #navigation::before {
	transform: rotate(-90deg);
}
#checkbox-navigation:checked ~ label #navigation::after {
	transform: translate(0, 0) rotate(-90deg);
}
header nav {
	position: absolute;
	right: var(--sp-M);
	margin-top: 1rem;
	border: .25rem solid var(--bg-acc1);
	border-radius: var(--sp-S);
	padding: var(--sp-S) var(--sp-M);
	gap: var(--sp-M);
	font-size: 1.25rem;
	display: flex;
	flex-direction: column;
	background: var(--bg-ligh);
}
header input:not(:checked) ~ nav {
	display: none;
}
header nav > a:first-child {
	border-radius: .5rem;
	padding: var(--sp-XS) var(--sp-S);
	color: var(--fg-acc1);
	background: var(--bg-acc1);
}
@media (min-width: 45rem) {
	header b {
		font-size: 2rem;
	}
	header input {
		display: none;
	}
	header label {
		display: none;
	}
	header nav {
		position: static;
		margin: 0;
		padding: 0;
		flex-direction: row;
		border: none;
		background: none;
	}
	header input:not(:checked) ~ nav {
		display: flex;
	}
}