Add a manual light/dark mode switcher

Despite the simplicity of the commit title, this was a pretty big
change. The styling used to just go off of the system's color scheme,
but that can't be overridden. Instead, I have made a variable that
determines whether dark theme is active and made a small panel with some
buttons to change the theme. I had to change a lot of code to achieve
this and lost a lot of hair (I metaphorically pulled it out) from
writing this code.

I also changed things from legacy mode to rune mode (Svelte 4 to 5)
while I was at it, that wasn't too big.

src/style/main.scss

@@ -4,21 +4,21 @@
   --text-color: #383c3f;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text-color: white;
-  }
-  body {
-    background-color: black;
-  }
-}
-
 body {
   font-family: "Noto Sans", sans-serif;
   margin: 0;
   color: global.$text-color;
 }
 
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: black; // Don't flashbang dark theme users
+  }
+  :root {
+    --text-color: white;
+  }
+}
+
 spacer {
   display: block;
   margin-top: 8%;
@@ -60,10 +60,12 @@ div.panel {
   backdrop-filter: blur(5px);
 }
 
-@media (prefers-color-scheme: dark) {
-  div.panel {
-    border-color: #ffffff33;
-  }
+main.dark-theme div.panel {
+  border-color: #ffffff33;
+}
+
+div.panel.dark-theme {
+  border-color: #ffffff33;
 }
 
 main div.hero {
@@ -82,7 +84,7 @@ main div.hero {
   }
 }
 
-main div#scroll-arrow {
+main div.scroll-arrow {
   text-align: center;
   font-size: 200%;
   width: 100%;
@@ -93,7 +95,7 @@ main div#scroll-arrow {
   transition: opacity 0.25s ease-in;
 }
 
-main div#scroll-arrow.scroll-arrow-hide {
+main div.scroll-arrow.scroll-arrow-hide {
   opacity: 0;
   visibility: hidden;
   transition: