oh no i bit more than i could chew oh fuck oh shit *dies*

_src/assets/css/default/nav.css

@@ -1,127 +1,128 @@
 .navbar {
-	position: fixed;
 	display: flex;
-	z-index: 2;
 	flex-direction: column;
-	overflow-x: hidden;
-	padding: var(--pad-l);
-	width: var(--view);
-	height: 100%;
-	overflow-y: scroll;
-	scrollbar-width: none;
 	gap: var(--pad-m);
+	height: 100%;
 	margin: 0;
-
+	overflow-x: hidden;
+	overflow-y: scroll;
+	padding: var(--pad-l);
+	position: fixed;
+	scrollbar-width: none;
+	width: var(--view);
 	& li *:is(a, button) {
 		align-items: center;
+		border-radius: var(--round);
 		border-style: solid;
 		border-width: 2px;
-		border-radius: var(--round);
 	}
-
 	& section {
 		border-radius: var(--round);
-		font-weight: bold;
-		border-width: 2px;
 		border-style: solid;
-
+		border-width: 2px;
+		font-weight: bold;
 		& h3 {
 			display: flex;
-			justify-content: center;
-			align-items: center;
-			padding: 0;
-			height: var(--pad-xl);
 			font-size: 1.4rem;
+			height: var(--pad-xl);
+			margin: var(--pad-s) auto 0 auto;
+			padding: 0;
 		}
 	}
 	& * svg,
 	li img {
+		align-self: center;
 		margin: 0 8px 0 8px;
 		width: 20px;
-		align-self: center;
 	}
-
 	& ul {
+		margin-top: 0;
 		margin: var(--pad-s);
 		padding: 0;
-
 		& li,
 		button {
-			padding: 0;
 			align-items: center;
 			margin-bottom: inherit;
-
+			padding: 0;
 			& img {
 				border-radius: 100%;
 			}
 		}
 	}
-
 	& li *:is(a, button) {
 		display: flex;
 		font-size: 1.125rem;
-		width: 100%;
 		font-weight: bold;
 		height: 36px;
 		line-height: var(--pad-xl);
+		width: 100%;
 	}
 }
-
-nav#default::before,
+#default::before,
 body::after {
-	z-index: -1;
 	content: "";
-	position: absolute;
+	height: inherit;
+	margin: 0;
 	mask-image: url("/assets/img/theme/sundae_sit-lines.png");
 	mask-repeat: no-repeat;
-	margin: 0;
-	width: inherit;
-	height: inherit;
 	pointer-events: none;
+	position: absolute;
+	width: inherit;
+	z-index: -1;
 }
-
-nav#default::before {
+#default::before {
+	-webkit-mask-position-x: -25px;
+	-webkit-mask-position-y: 90%;
 	bottom: 0;
 	left: 0;
 	mask-size: 160%;
-	-webkit-mask-position-x: -25px;
-	-webkit-mask-position-y: 90%;
 }
-
 body::after {
-	content: none;
-	mask-size: 100%;
-	width: 100%;
-	height: 100vw;
 	-webkit-mask-position-x: 0;
 	-webkit-mask-position-y: bottom;
+	content: none;
+	height: 100vw;
+	mask-size: 100%;
+	width: 100%;
 }
-
-nav#floating {
-	width: var(--float);
-	height: fit-content;
-	border-bottom-style: solid;
-	border-right-style: solid;
-	border-bottom-width: 2px;
-	border-right-width: 2px;
+#floating {
 	border-bottom-right-radius: var(--pad-l);
+	border-bottom-style: solid;
+	border-bottom-width: 2px;
+	border-right-style: solid;
+	border-right-width: 2px;
+	height: fit-content;
+	top: 0;
+	width: var(--float);
 	& button {
-		width: fit-content;
 		font-size: 0;
+		width: fit-content;
 	}
 	& a {
 		display: none;
 	}
 }
-
-div#sidebar {
-	margin: 0;
-	padding: 0;
+#sidebar {
 	background: none;
 	border: 0;
+	margin: 0;
+	padding: 0;
 }
-nav#default {
+#default {
 	border: 0;
 	border-right-style: solid;
 	border-right-width: 2px;
 }
+/* hack to make the header look seamless with the nav when using citrus theme */
+body {
+	position: relative;
+	z-index: -3;
+	& main {
+		position: inherit;
+		z-index: -2;
+	}
+	& #sidebar {
+		position: inherit;
+		z-index: -1;
+	}
+}