.navBar {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.navBar a {
	font-family: "Federo", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-decoration: none;
}

ul.navBar {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

ul li.nav-item {
    display: flex;
	float: left;
    list-style-type: none;
    margin-right: 1em;
	background-color: var(--nav-bar-bg);
    border-radius: 1em;
}

ul li.nav-item {
	display: block;
	color: var(--nav-button-text-color);
	text-align: center;
	padding: 14px 16px;
	transition: box-shadow 0.3s ease-in-out;
	box-shadow: 3px 4px rgba(0, 0, 0, 1);
}	

ul li.nav-item a {
	color: var(--nav-button-text-color);
	text-decoration: none;
}

ul li.nav-item:hover {
	background-color: var(--nav-hover-color);
	box-shadow: 3px 8px var(--bg-three-lite), -3px -8px var(--bg-two-lite);
}