@import "site-colors.css";

header > nav > ul {
	position: relative;
}

header ul {
	display: flex;
	flex-direction: row;
	list-style-type: none;
	padding-left: 1em;
}

header li.bg-banding {
	position: absolute;
	left: -0.5em;
	right: 0;
	z-index: -1;
	color: rgba(0,0,0,0);
}

@media only screen and (max-width: 600px) {
	header ul { padding-left: 0; }
}

header ul ul {
	flex-direction: column;
	flex-wrap: wrap;
	padding-left: 20px;
}

header ul ul > li {
	white-space: nowrap;
	padding-left: 0.5em;
	font-size: 0.9em;
}

header ul ul > li:nth-child(1) {
	margin-left: -2em;
}

header ul ul > li:nth-child(n+2)::marker {
	content: "/";
}

header li.bg-banding li:nth-child(n+2)::marker {
	content: "";
}

header ul ul > li:nth-child(even) {
	background-color: var(--background-alt);
}

li .smol {
	font-size: 0.8em;
}