:root {
    --topnav-height: 30px;
}

.topnav {
	width: 100vw;
	height: var(--topnav-height);
	display: flex;
	justify-content: space-between; /* Choose how to display/position the subelements. */
	background-color: rgb(80, 177, 188);
	vertical-align: middle;
	margin-bottom: 0rem;
	position: fixed;
	z-index: 10;
	background-color: rgb(97, 185, 194);
}

.topnav ul {
	list-style-type: none; /* Remove the tokens in front of the list elements. */
	margin: 0;
	padding: 0;
	overflow: hidden; /* Hide elements that go over the current screen width. */
	background-color: rgb(97, 185, 194);
}

.topnav ul li {
	margin-left: 5px;
	margin-right: 5px;
	padding-top: 2px;
}

.topnav ul li a {
	text-decoration: none;
	color: rgb(0, 0, 0);
	user-select: none;
	font-size: 2rem;/*1.4rem;*/
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	height: 20px;
}

.topnav ul li a:hover {
	background-color: rgb(168, 217, 219);
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.topnav-button {
	font-size: 1.4rem;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	height: 23px;
	/*padding: 4px .3rem;*/
	padding-left: .3rem;
	padding-right: .3rem;
	text-align: center;
	vertical-align: middle;
	border: 0.2rem solid; /* rgb(4, 119, 62);*/
	border-radius: .5rem;
	margin: .3rem .5rem;
	color: rgb(0, 81, 85);
	background-color: rgb(168, 217, 219);/*1, 173, 182*/
	/*background-color: rgb(70, 216, 126);*/
	box-sizing: border-box;
}

.topnav-button:hover {
	background-color: rgb(100, 151, 153);/*1, 173, 182*/
}

.topnav-button a {
	text-decoration: none;
	color: rgb(6, 63, 30);
	user-select: none;
}