nav {
	display:flex;
	flex-direction:column;
	width:100%;
	background:$nav-background-primary;
	color:$nav-color;
	border-bottom:$nav-border;

	h1 {
		margin:$nav-h1-margin;
	}

	ul {
		display:flex;
		margin:0;
		padding:0;
		list-style-type:none;
			
		li {

			a {
				padding:1em;
				display:block;
				text-decoration:none;
				
				&, &:active, &:visited {
					color:$nav-color;
				}
			
				&:hover {
					color:$nav-anchor-hover-color;
				}
			}
		}
	}

	.mainnav {
		display:flex;
		justify-content:space-between;
		align-items:flex-end;
		width:$recipe-wrap;
		margin:0 auto;
	}

	.subnav {
		display:flex;
		justify-content:center;
		background:$nav-background-secondary;
	}
}

