:root {
	--navbar-width-mobile: 60%;
}

.mobile-nav-toggle {
	display: none;
	background-color: transparent;
	background-image: url('../menuClosed.png');
	background-repeat: no-repeat;
	background-size: contain;
}

.navbar {
	list-style-type: none;
  	margin: 0;
  	padding: 0;
  	top: 0;
  	position: fixed;
  	width: 100%;
  	height: 2.3em;
  	overflow: visible;
	font-size: 2rem;
	color: #FFFFFF;
	background: #696969;
}

.bottomBar {
	list-style-type: none;
	margin: 0;
	padding: 0;
	bottom: 0;
	position: fixed;
	width: 100%;
	height: 20px;
	overflow: hidden;
	font-size: 15px;
	color: #FFFFFF;
	background: #696969;
}

.navBtn:hover, .navBtn:hover, .mainHomeList:hover {
	background: #111;
}

.navBtn {
	padding: 14px 16px;
	margin:0;
	cursor:pointer;
	height: 1.4em;
}

.navListL {
	float: left;
	display: inline;
	color: white;
	text-align: center;
	text-decoration: none;
	border-right: 2px solid #000000;
	transition-duration: 0.2s;
	height: 2.3em;
}

.navListR {
	float: right;
	display: inline;
	color: white;
	text-align: center;
	text-decoration: none;
	border-right: 2px solid #000000;
	transition-duration: 0.2s;
}

@media (max-width: 55em){
	.navbar {
		inset: 0 0 0 40%;
		height: 100vh;
		overflow: auto;
		display:flex;
		flex-direction: column;
		padding-top: min(40vh, 8rem);
		width: var(--navbar-width-mobile);
		z-index: 1000;
		transform: translateX(100%);
		transition: transform 300ms ease-out;
		overflow-y:scroll;
	}
	.navListL,
	.navListR {
		border-right: none;
		border-bottom: 2px solid #000000;
		border-top: 2px solid #000000;
		padding: 2px;
	}
	.navListL,
	.navListR,
	.navBtn {
		display: flex;
		width:100%;
	}
	.mobile-nav-toggle {
		display: block;
		position: absolute;
		width: 4rem;
		aspect-ratio: 1;
		top: 2rem;
		right: 2rem;
		z-index: 9999;
		border:0;
		font-size:0px;
	}

	.navbar[data-visible="true"] {
		transform:translateX(0%);
	}

	.mobile-nav-toggle[aria-expanded="true"] {
		background-image: url('../menuOpen.png');
	}
}