#toggle-button {
	position: fixed;
	left: 10px;
	top: 30px;
	cursor: default;
}

nav {
	text-align: center;
	font-size: 20px;
}

nav a {
	text-decoration: none;
	color: black;
	margin: 5px;
}

nav a:hover {
	color: var(--light-color);
	text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

.nav-top {
	display: none;
}

.nav-top a {
	padding: 9px;
}

.nav-top li {
	display: inline-block;
	padding: 10px;
}


.nav-side {
	position: fixed;
	top: 0px;
	background-color: var(--ascent-color);
	outline: 1px solid black;
	width: 200px;
	height: 100vh;
	border-radius: 0px;
	float: left;
	overflow-y: scroll;
}

.nav-side.hide-nav { margin-left: -250px; }

.nav-top li div { display: none; }
.nav-top li:hover div { display: block; }
.nav-top li:active div { display: block; }

.nav-side li div {
	display: none;
	left: 20px;
}
.nav-side li:hover div { display: block; }
.nav-side li:active div { display: block; }

.nav-top *::-webkit-scrollbar { display: none; }
.nav-side::-webkit-scrollbar { display: none; }
.nav-side *::-webkit-scrollbar { display: none; }

.nav-side a {
	display: block;
	padding: 15px;
	padding-top: 25px;
}

.nav-side img {
	width: 80px;
	margin-top: 80px;
	border-radius: 50%;
	outline: 1px solid black;
}


.drop-down-wrapper {
	position: absolute;
	top: 0px;
	left: -5px;
	background-color: var(--ascent-color);
	outline: 1px solid black;
	border-radius: 10px;
	width: 150px;
	max-height: 300px;
	overflow-y: scroll;
	padding-top: 50px;
	text-align: center;
}

.drop-down-item {
	display: block;
	font-size: 15px;
	text-align: center;
	margin: auto;
}

.drop-down-menu-style {
	position: absolute;
	top: 0px;
	width: 150px;
	height: 50px;
	background-color: var(--ascent-color);
	border-bottom: 1px dashed black;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.nav-top * .drop-down-menu-style {
	left: -5px;
}

.nav-side * .drop-down-menu-style {
	left: 20px;
}


@media (min-width: 768px) {
	.nav-side, #toggle-button { display: none; }
	.nav-top { display: block; }
}