@charset "UTF-8";

.navcontainer {
	position: fixed;
	top: 0;
	width: 100%;
	display: none;
}

.navbar {
	color: ivory;
}

.navbar {
	display: flex;
	margin: auto;
	padding: 0;
	overflow: hidden;
	background-color: var(--lighter-bg);
	width: 100%;
	max-height: 200px;
}

.navbar div a {
	color: ivory;
	display: block;
	padding: 14px 16px;
	text-decoration: none;
}

.navbar div a:hover {
	background-color: var(--active-bg);
}

.navitem {
	margin: auto;
	min-width: 150px;
	transition: opacity 0.2s linear;
}

.navitem .icon.arrow {
	margin-top: -7px;
}

.navitem.left {
	text-align: left;
}

.navitem.left .icon {
	transform: scaleX(-1);
	float: left;
	padding: 0px 0px 0px 10px;
}

.navitem.mid {
	flex: auto;
	text-align: center;
	display: block;
	padding: 0px 10px 0px 10px;
}

.navitem.right {
	text-align: right;
}

.navitem.right .icon {
	float: right;
	padding: 0px 0px 0px 10px;
}

#nav-decorator {
	margin: auto;
	transition: opacity 0.2s linear;
}

@media screen and (max-width: 800px) {
	.navitem.left {
		display: none;
	}
}