fix for the 3% of people

src/lib/components/navbar.svelte

@@ -38,6 +38,14 @@
 		background: rgba(255,255,255, 0.2);
 		backdrop-filter: blur(10px);
 	}
+	@supports (-moz-appearance:none) {
+		.bar {
+			background: rgba(255,255,255,0.9) !important;
+		}
+		.dark.bar {
+			background: rgba(28, 28, 33, 0.9) !important;
+		}
+	}
 	@media (max-width: 400px) {
 		.bar {
 			width: 100vw;

src/lib/components/project.svelte

@@ -81,6 +81,11 @@
         background-color: rgba(0,0,0,0.2);
         color: rgb(214, 214, 214);
     }
+	@supports (-moz-appearance:none) {
+		.desc {
+			background: rgba(0,0,0,0.9) !important;
+		}
+	}
     .desc.extradark {
         background-color: rgba(0,0,0,0.4);
     }

src/lib/components/technologyDetails.svelte

@@ -1,4 +1,6 @@
 <script>
+    import darkmode from "$lib/stores/darkmode";
+
     export var selected = true;
 
     var shouldClose = true;
@@ -11,7 +13,7 @@
     }
 </script>
 
-<div class="dialog" class:selected on:mousedown={() => shouldClose = true} on:mousemove={() => shouldClose = false} on:mouseup={close}>
+<div class="dialog" class:dark={$darkmode} class:selected on:mousedown={() => shouldClose = true} on:mousemove={() => shouldClose = false} on:mouseup={close}>
     <div class="main">
         {#if selected === "typescript"}
             <h2>Typescript</h2>
@@ -138,7 +140,16 @@
         border-radius: 15px;
         cursor: pointer;
         background: rgba(255,255,255,0.1);
+        box-shadow: 0.6px 1.3px 1.3px hsl(0deg 0% 0% / 0.48);
     }
+	@supports (-moz-appearance:none) {
+		.dialog {
+			background: rgba(255,255,255,0.9) !important;
+		}
+        .dark.dialog {
+            background: rgba(70,70,70,0.97) !important;
+        }
+	}
     h2 {
         margin-top: 0;
         margin-block-start: 0;
@@ -158,7 +169,7 @@
     .a:hover {
         text-decoration: underline;
     }
-    :global(.dark .dialog) {
+    .dark.dialog {
         background: rgba(255,255,255,0.2);
     }
     .dialog.selected {

src/routes/index.svelte

@@ -62,6 +62,7 @@
 			<Button href="/posts">blog</Button>
 		</div>
 	</div>
+	<p class="center firefox-notice">Firefox (and it's 3.4% users) doesn't support background blur. This website is better viewed on a more modern browser.</p>
 	<div class="projects" id="projects">
 		<div>
 			<h2>
@@ -221,6 +222,14 @@
 <Bottombar />
 
 <style>
+	.firefox-notice {
+		display: none;
+	}
+	@supports (-moz-appearance:none) {
+		.firefox-notice {
+			display: block !important;
+		}
+	}
 	img.white {
 		background: white;
 		border-radius: 50%;