:root{
	--max-navbar-dropdown-height: 130px;
}


/*----------Navbar---------*/
.navbar{
	width: var(--navbarwidth);
	position: sticky;
	top: 0;
	z-index: 10;
	margin: 1vh auto auto auto;
	background-color: #101d1f80;
	border: 3px solid var(--cyan);
	backdrop-filter: blur(10px);
	box-sizing: border-box;		/* Takes the border and padding into consideration when computing size */
}

.back-c, .navbar-elem{background-color: var(--cyan);}
.navbar-elem:hover{background-color: var(--cyan2);}
.back{height: 100%;}
.back-icon{height: 3.25rem;}
.navbar-void{width: 100%;}
.navbar-icon{height: 2.25rem;}

.navbar-elem{
	position: relative;
	width: 33%;
	min-width: 3rem;
	margin-left: 5px;
}

.dropdown-c{
	background-color: white;
	position: absolute;
	z-index: 10;
	overflow: hidden;
	width: 100%;
	min-width: 3rem;
	border: 3px solid var(--cyan);
	opacity: 0;
	max-height: 0;
	transition: max-height 0.15s linear;
	overflow: hidden;
}

.navbar-elem:hover .dropdown-c{
	opacity: 1;
	max-height: var(--max-navbar-dropdown-height);
}

.navbar-elem:not(:hover) .dropdown-c {transition-delay: 1s;}

.navbar-link, .navbar-link:hover{
	font-weight: bold;
	display: block;
	padding: 10px;
}


/*----------Responsive Design---------*/
/*----------Large---------*/
@media screen and (max-width: 1024px) {
	.navbar-void{width: 0%;}
}