/* # Overrides */

header {
	position: relative;
	border-bottom: none;
}

/* # Sections */

/* ## Header */

section.header {
	top: 0;
	width: 100%;
	z-index: 100;
	display: flex;
	color: white;
	position: sticky;
	overflow: hidden;
	grid-area: header;
	align-items: stretch;
	height: calc(var(--running-size) - var(--padding));
	grid-template-rows: var(--running-size);
	background-color: var(--color-accent);
	box-shadow: 
		0 2px 0 0 white,
		20svw 0 0 0 var(--color-accent),
		-20svw 0 0 0 var(--color-accent)
	;
}

/* ### Nav */

section.header nav {
	display: flex;
	align-items: center;
	padding: var(--padding);
	justify-content: baseline;
}

section.header nav:last-of-type {
	justify-content: end;
	gap: calc(var(--padding) / 2);
}

/* ### Spacer */

section.header nav > div {
	width: 2px;
	height: 80%;
	margin: 0 var(--padding);
	background-color: rgba(0, 0, 0, .07);
}

/* ### Buttons */

section.header button.inline:not(.solid):hover,
section.header button.inline {
	fill: white;
	color: white;
}

section.header button.inline.solid {
	color: var(--color-accent);
	background-color: white;
}