nav ul {
	list-style: none;
	// Safari hack, see https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
	list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	border-color: #006699;
	border: none;
}

nav li {
	list-style: none;
	margin: 0.5em;
	padding: 0;
	font-size: 1.2em;
}

@media (min-width: 50em) {
	nav ul {
		flex-direction: row;
	}
	nav li {
		flex: 1;
		font-size: .8em;
	}
}

nav a {
	display: block;
	padding: 0.2em;
	text-decoration: none;
	font-weight: bold;
	border: thin solid var(--background-color);
	border-radius: .5em;
	color: var(--accent1-color);
	background-color: var(--background-color);
	transition: all .25s ease-in;
}

[aria-current=page] {
	background: var(--accent2-color);
}

nav a:focus,
nav a:hover,
nav a:active {
	color: var(--background-color);
	background-color: var(--accent1-color);
}

:root {
	--background-color: #006699;
	--accent1-color: #FFFFFF;
	--accent2-color: #000000;
	--text-color: #FFFFFF;
}