.menu {
	background: $red;
	height: 3em;
	box-shadow: 0 -1em 0.5em -1em #222 inset;

	ul {
		height: inherit;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: no-wrap;
	}

	li {
		font-family: $heading-font;
	}

	a, a:visited {
		color: white;
		text-decoration: none;
		padding: 1em;
	}
	a:hover {
		color: $yellow;
	}

}

.menu {
	background: $red;
	height: 3em;
	box-shadow: 0 -1em 0.5em -1em #222 inset;

	ul {
		height: inherit;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: no-wrap;
	}

	li {
		font-family: $heading-font;
	}

	a, a:visited {
		color: white;
		text-decoration: none;
	}
	a:hover {
		color: $yellow;
	}

}

Fix menu items on small screens.
Fix menu items on small screens.
