seperated system theme into its own css file, combined different page css to a main theme css

_src/assets/css/default/nav.css

@@ -10,53 +10,41 @@
 	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;
-	}
 	& section {
-		border-radius: var(--round);
-		border-style: solid;
-		border-width: 2px;
 		font-weight: bold;
 		& h3 {
-			display: flex;
 			font-size: 1.4rem;
 			height: var(--pad-xl);
-			margin: var(--pad-s) auto 0 auto;
+			margin: var(--pad-s) auto 0;
 			padding: 0;
 		}
 	}
-	& * svg,
-	li img {
-		align-self: center;
-		margin: 0 8px 0 8px;
-		width: 20px;
-	}
 	& ul {
-		margin-top: 0;
-		margin: var(--pad-s);
+		margin: 0 var(--pad-s) var(--pad-s);
 		padding: 0;
-		& li,
-		button {
-			align-items: center;
+		& li {
 			margin-bottom: inherit;
-			padding: 0;
+			& a,
+			button {
+				display: flex;
+				font-size: 1.125rem;
+				font-weight: bold;
+				height: 36px;
+				line-height: 2.125rem;
+				padding: 0;
+				width: 100%;
+			}
+			& img,
+			svg {
+				align-self: center;
+				margin: 0 8px 0 8px;
+				width: 20px;
+			}
 			& img {
 				border-radius: 100%;
 			}
 		}
 	}
-	& li *:is(a, button) {
-		display: flex;
-		font-size: 1.125rem;
-		font-weight: bold;
-		height: 36px;
-		line-height: var(--pad-xl);
-		width: 100%;
-	}
 }
 #default::before,
 body::after {
@@ -71,17 +59,17 @@ body::after {
 	z-index: -1;
 }
 #default::before {
-	-webkit-mask-position-x: -25px;
-	-webkit-mask-position-y: 90%;
 	bottom: 0;
 	left: 0;
+	mask-position-x: -25px;
+	mask-position-y: 90%;
 	mask-size: 160%;
 }
 body::after {
-	-webkit-mask-position-x: 0;
-	-webkit-mask-position-y: bottom;
 	content: none;
 	height: 100vw;
+	mask-position-x: 0;
+	mask-position-y: bottom;
 	mask-size: 100%;
 	width: 100%;
 }
@@ -107,22 +95,9 @@ body::after {
 	border: 0;
 	margin: 0;
 	padding: 0;
+	z-index: 1;
 }
-#default {
-	border: 0;
-	border-right-style: solid;
-	border-right-width: 2px;
+#floating,
+#sidebar {
+	z-index: 2;
 }
-/* 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;
-	}
-}