.navbar{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: start;
	flex-direction: row;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2px;
	margin-bottom: 24pt;
	background-color: #cccccc;
	min-width: var(--sidebar-button-width);
}


a.navbutton, a.navbutton:visited, a.navbutton:link, a.navbutton:active {
	border: none;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;

	min-width: 60px;
	height: 30px;

	padding-left: 12pt;
	padding-right: 12pt;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px;

	color: #4d4d4d;
	text-decoration: None;
}


a.navbutton:hover, a#navbutton-current:hover {
	color: #141414;
        background-color: #bfbfbf;
	cursor: pointer;
	text-decoration: none;
}


a#navbutton-current {
	/* color: #4d4d4d; */
        background-color: #b3b3b3;
	cursor: pointer;
}


/* Wrapper around navigation bar menu icon.
 * Need this wrapper to (flexibly) right-align menu icon */
.navbar-icon {
	margin-left: 2px;
	margin-right: 2px;
	overflow: hidden;
}



/* Menu hamburger icon. We only want that displayed if
 * display is too small. */
.menu-icon {
	display: none;
	width: 40px;
	height: 30px;
	object-fit: fill;
	float: right;
	padding: 0;
}

.menu-icon:hover {
        background-color: #bfbfbf;
}



/* When things get tight */
@media screen and (max-width: 1300px) {

	/* Make the menu icon appear */
	.menu-icon {
		display: block;
	}

	/* Make navbar vertical. */
	.navbar {
		display: none;
		justify-content: flex-end;
		flex: 100%;
		flex-direction: column;
		align-items:end;
		height: auto;
		width: auto;
		/* Same as menu-icon */
		/* margin-right: 3em; */
	}

	.navbutton, .navbutton:visited {
		border: none;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;

		width: var(--sidebar-button-width);
		min-height: 3em;

		padding-left: 12pt;
		padding-right: 12pt;
		padding-top: 0px;
		padding-bottom: 0px;
		margin: 0px;

		color: #4d4d4d;
		text-decoration: None;
	}
}


/* For mobile screens (proxy detection through toughscreen pointer) */
@media (pointer: coarse) {

	/* Make the menu icon appear */
	.menu-icon {
		display: block;
	}

	/* Make navbar vertical. */
	.navbar {
		display: none;
		justify-content: flex-end;
		flex: 100%;
		flex-direction: column;
		align-items:end;
		height: auto;
		width: auto;
		/* Same as menu-icon */
		/* margin-right: 3em; */
	}

	.navbutton, .navbutton:visited {
		border: none;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;

		width: var(--sidebar-button-width);
		min-height: 3em;

		padding-left: 12pt;
		padding-right: 12pt;
		padding-top: 0px;
		padding-bottom: 0px;
		margin: 0px;

		color: #4d4d4d;
		text-decoration: None;
	}
}