nav {
    z-index:2;
	--height: 60px;
	position: fixed;
	top: 0;
	left: 0;
	height: var(--height);
	width: 100%;
	/* box-sizing:border-box; */
	/* padding:0 10px; */

	display: flex;
	flex-direction: row;
	justify-content: space-between;

	background-color: var(--bg);

	#home {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: var(--height);
		width: var(--height);
		path {
			fill: var(--accent);
			/* stroke:var(--accent); */
		}
	}
	input {
		--br: 4px;
		--h: 30px;
		--w: 20px;

		width: 100px;
		height: 10px;
		background-color: var(--accent-2);
		border-radius: var(--br);
		-webkit-appearance: none;
		appearance: none;
	}
	input::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: var(--w);
		height: var(--h);
		background-color: var(--color);
		cursor: pointer;
		border-radius: 4px;
	}
	input::-moz-range-thumb {
		width: var(--w);
		height: var(--h);
		background-color: var(--color);
		cursor: pointer;
		border-radius: 4px;
	}
}
#options {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}
#theme-switch {
	/* height: var(--height); */
	--d: 40px;
	height: var(--d);
	width: var(--d);
	color: var(--text);
	/* margin-right: 14px; */
	/* fill: var(--accent); */
	fill: none;
	stroke: var(--accent);
}
.menu-wrapper {
	height: var(--height);
	width: var(--height);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.menu {
	display: inline-block;
	cursor: pointer;
	color: var(--text);
}
.bar1,
.bar2,
.bar3 {
	width: 35px;
	height: 5px;
	background-color: var(--accent);
	/* background-color: #333; */
	margin: 6px 0;
	/* transition: 0.4s; */
	border-radius: 4px;
}
.change .bar1 {
	transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {
	opacity: 0;
}
.change .bar3 {
	transform: translate(0, -11px) rotate(45deg);
}
#drawer {
	position: fixed;
	z-index: 1;
	height: 100%;
	width: 0;
	top: 0;
	right: 0;
	/* width: 250px; */
	/* height: 0; */
	/* bottom: 0; */
	/* left: 0; */
	/* background-color: #111111db;  */
	background-color: var(--bg-op);
	overflow-x: hidden;
	/* padding-top: 18svh; */
	/* transition: 0.2s; */
	opacity: 0;
}
.change #drawer {
	width: 250px;
	/* height: 250px; */
}
.butt {
	width: 80%;
	display: flex;
	justify-content: center;
	margin: 20px 0px 20px 0px;
}
.drawer-btn {
	padding: 20px;
	/* color: antiquewhite; */
	color: var(--text);
	font-size: 20px;
	font-family: monospace;
	background-color: var(--nav-btn);
	text-decoration: none;
	width: 100%;
	text-align: center;
	border-radius: 6px;
	cursor: pointer;
}
.drawer-btn:hover {
	color: var(--text);
	background-color: var(--nav-btn-hv);
	box-shadow: 0px 0px 5px 1px var(--nav-btn-hv);
}
.drawer-btn:active {
	color: var(nav-btn-act);
	background-color: var(nav-btn-act-bg);
}