fix: scrollbars are minimal and out of the way

src/app.css

@@ -428,3 +428,40 @@ a:focus-visible {
 		gap: 1.8em;
 	}
 }
+
+/*
+Scrollbar
+*/
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--color-font-primary);
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-font-primary);
+}
+/*Firefox*/
+* {
+  scrollbar-width: thin; /* auto | thin | none */
+  scrollbar-color: rgba(0, 0,0,0.3) transparent;
+}
+html {
+  scrollbar-gutter: stable;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0,0,0,0.3);
+  border-radius: 10px;
+}
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme="light"]){
+  		scrollbar-color: rgba(255, 255,255,0.3) transparent;
+	}
+}