#c-menu {
	display: none;
}
header {
	max-width: 50rem;
	width: 100%;
	padding: var(--sp-M) var(--sp-L);
	gap: var(--sp-L);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
header b {
	font-size: 1.5rem;
}
header a {
	gap: var(--sp-L);
	display: flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}
header img {
	height: 2.5rem;
}
header section {
	height: fit-content;
	display: block;
}
header nav a:first-of-type {
	padding: var(--sp-XS) var(--sp-S);
	border-radius: var(--sp-S);
	font-weight: bold;
	color: var(--fg-acc1);
	background: var(--bg-acc1);
}
header label {
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	cursor: pointer;
}
#menu, #menu::before, #menu::after {
	position: absolute;
	width: 2rem;
	height: .125rem;
	background-color: var(--fg-norm);
	transition: transform .3s;
}
#menu::before {
	content: '';
	transform: translateY(-.625rem);
}
#menu::after {
	content: '';
	transform: translateY(.625rem);
}
header input:checked ~ label #menu {
	transform: rotate(45deg);
}
header input:checked ~ label #menu::before {
	transform: rotate(-90deg);
}
header input:checked ~ label #menu::after {
	transform: translate(0, 0) rotate(-90deg);
}
header nav {
	position: absolute;
	right: var(--sp-M);
	margin-top: 1rem;
	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-dark);
}
header input:not(:checked) ~ nav {
	display: none;
}
footer {
	gap: var(--sp-S);
	display: flex;
	flex-wrap: wrap;
}
footer a {
	color: inherit;
}
@media (min-width: 50rem) {
	header b {
		font-size: 2rem;
	}
	header label {
		display: none;
	}
	header nav {
		position: static;
		margin: 0;
		padding: 0;
		flex-direction: row;
		background: none;
	}
	header input:not(:checked) ~ nav {
		display: flex;
	}
}