diff --git a/src/pages/index.js b/src/pages/index.js
index 4734b83..dc69e94 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -26,7 +26,7 @@ const getDifferentRand = (range, lastNs, iterations = 0) => {
 const getButtonClasses = (isClient, colorMode = "vibrant") =>
   classnames(
     "z-20 rounded-md text-md inline-block px-3 py-2 my-1 mr-2 text-md hover:underline",
-    isClient && `text-muted-light bg-${colorMode}-dark blurred-or-opaque-bg-2`,
+    isClient && `text-${colorMode}-light bg-${colorMode}-dark blurred-or-opaque-bg-2`,
     isClient && colorMode === "muted" ? `hover:bg-muted` : ""
   );
 
@@ -263,7 +263,7 @@ const IndexPage = ({
               className={classnames(
                 ar > 1 && "landscape:shadow-lg",
                 "z-20 mb-4 inline-block mx-2",
-                isClient && "bg-vibrant-dark blurred-or-opaque-bg-1"
+                isClient && "bg-vibrant-dark blurred-or-opaque-bg-2"
               )}
             >
               <div className="flex-auto">
diff --git a/src/styles/global.css b/src/styles/global.css
index 9fa047a..8b79002 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -38,7 +38,7 @@
   .blurred-or-opaque-bg-2 {
     @apply bg-opacity-90;
   }
-  @supports (backdrop-filter: blur(24px)) {
+  @supports (backdrop-filter: none) {
     .blurred-or-opaque-bg-1 {
       @apply bg-opacity-50 backdrop-filter backdrop-blur-lg;
     }
@@ -46,6 +46,14 @@
       @apply bg-opacity-70 backdrop-filter backdrop-blur;
     }
   }
+  @supports not (backdrop-filter: none) {
+    .blurred-or-opaque-bg-1 {
+      @apply bg-opacity-70;
+    }
+    .blurred-or-opaque-bg-2 {
+      @apply bg-opacity-90;
+    }
+  }
   @variants responsive {
     .h-two-thirds-vw {
       height: 67vw;