nav {

	width:100%;

	margin: 0 auto;

	top:0px;

	font-weight: bold;

	font-family: "times new roman";
}

nav ul {

	padding:0;

	padding-top:8px;

	margin:0;

	list-style: none;

	display:flex;

	flex-wrap:wrap;

}



nav ul::after{

	content:"";

	display:table;

	clear:both;

}



nav ul li {

	padding:0;

	margin:0;

	text-align: center;

	float:left;

	position:relative;

	color: white;

	padding: auto 10px;

}

nav ul li a {

	border: 1px solid black;

	border-radius:15px;

	padding:5px;

	margin:2px;

	display: block;

	font-size:0.8em;

	text-decoration:none;

	/* COLOR THEME */
	color: var(--fg-navbar-item);
	background-color: var(--bg-navbar-item);

}



nav ul li a:hover {

	text-decoration:none;

	/* COLOR THEME */
	color: var(--fg-navbar-item-hover);
	background-color: var(--bg-navbar-item-hover);

}



nav a {

	display:block;

	text-decoration: none;

	padding:10px 0px;

	/* COLOR THEME */
	color: var(--fg-navbar-item);
}



nav a:hover{

	/* COLOR THEME */
	color: var(--fg-navbar-item-hover);

}



.sub-menu {

	display:none;

	box-shadow: 0px 1px 2px #CCC;

	border-radius: 15px;

	margin: 0;
	padding: 0;

	position:absolute;

	width:100%;

	z-index:1000;

	/* COLOR THEME */
	color: var(--fg-navbar-sub-menu);
	background-color: var(--bg-navbar-sub-menu);
}



nav > ul li:hover .sub-menu{

	display:block;

}



.sub-menu li{

	float:none;

	width:100%;

	text-align:left;

}



.sub-menu a {

	padding:10px;

	border:none;

}



.sub-menu a:hover {

	border-bottom:none;

	/* COLOR THEME */
	background-color: var(--bg-navbar-sub-menu-hover);

}



.menu > a::after{

	content:" ▼";

	font-size:12px;

}