#mobile-menu {
	background: var(--light);
	display: none;
	position: fixed;
}

#mobile-menu.open {
	left: 0px;
	top: 0px;
	z-index: 7;
	width: 100vw;
	min-height: 100vh;
	display: block;
}

#mobile-menu ul {
	margin-top: 0px;
	list-style-type: none;
	-webkit-padding-start: 0;
	border-top: var(--dark);
}

#mobile-menu ul li {
	font-size: 18pt;
	border-bottom: solid 1px var(--dark);
	border-bottom-color: #dddddd;
}

#mobile-menu ul li a {
	display: block;
	padding: var(--spacer-three) var(--spacer-five);
	width: 100%;
	text-decoration: none;
	color: var(--dark);
}

#mobile-menu ul li a:hover {
	color: var(--dark);
}

#mobile-menu #mobile-menu-header {
	display: flex;
	padding: var(--spacer-one);
	align-items: center;
	justify-content: flex-end;
}

#mobile-menu #close-icon {
	cursor: pointer;
}

#mobile-menu #hamburger:hover path {
	stroke: #cccccc;
}

#mobile-menu #hamburger path {
	stroke: var(--light);
}

@media screen and (prefers-color-scheme: dark) {
	#mobile-menu {
		background: var(--dark);
		color: var(--light);
	}

	#mobile-menu #close-icon:hover path {
		stroke: #cccccc;
	}

	#mobile-menu #close-icon path {
		stroke: var(--light);
	}

	#mobile-menu ul li a {
		color: var(--light);
	}

	#mobile-menu ul li a:hover {
		color: #cccccc;
	}
}