.site-header {
	display: flex;
	flex-flow: column;
	align-items: center;
	gap: 1em;
	padding-block: 1em;
}

.site-header .masthead {
	margin-block-start: 1rem;
}

.site-header nav {
	margin-block: 3rem;
}

.site-header ul {
	list-style: none;
	display: flex;
	flex-flow: column;
	align-items: center;
	gap: 1em;
	li.active {
		color: gold;
		font-weight: bold;
	}
}

.site-header nav a {
	color: inherit;
	text-decoration: none;
	svg {
		width: 0.75em;
		height: 0.75em;
		margin-inline-start: 0.5rem;
	}
}




.site-header input, .site-header label {
	display: none;
}

@media (max-width: 40rem) {

	.site-header label {
		display: unset;
		svg {
			width: 2rem;
			height: 2rem;
		}
	}

	.site-header {
		display: grid;
		grid-template-areas:
			"menu logo ."
			"navs navs navs";
		grid-template-columns: 1fr auto 1fr;

		.menu-icon {
			grid-area: menu;
			margin-left: 2rem;
			margin-top: 1rem;
		}
		.masthead {
			grid-area: logo;
		}
		.navs {
			grid-area: navs;
		}
	}

	.site-header .navs {
		display: none;
	}

	.menu-btn:checked ~ .navs {
		display: unset;
	}

}