diff --git a/gatsby-node.js b/gatsby-node.js
index 1bb56a5..6aa34e1 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -56,6 +56,11 @@ function processColors(vibrantData, imagePath) {
     }
   }
 
+  // only used for hover styles, so we should give it a shot but it's not a huge deal if it's not very legible
+  if (badContrast(Muted, LightMuted)) {
+    Muted = Muted.darken();
+  }
+
   if (badContrast(DarkVibrant, Vibrant)) {
     console.warn("contrast still too low", imagePath);
     logColorsWithContrast(Vibrant, DarkVibrant, "V-DV");
diff --git a/src/pages/index.js b/src/pages/index.js
index 4bee291..b502bd6 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -24,8 +24,9 @@ const getDifferentRand = (range, lastNs, iterations = 0) => {
 };
 
 const getButtonClasses = (isClient, colorMode = "vibrant") => {
-  const textColor = colorMode === 'vibrant' ? 'text-vibrant-light' : 'text-muted-light'
-  const bgColor = colorMode === 'vibrant' ? 'bg-vibrant-dark' : 'bg-muted-dark'
+  const textColor =
+    colorMode === "vibrant" ? "text-vibrant-light" : "text-muted-light";
+  const bgColor = colorMode === "vibrant" ? "bg-vibrant-dark" : "bg-muted-dark";
   return classnames(
     "z-20 rounded-md text-md inline-block px-3 py-2 my-1 mr-2 text-md hover:underline",
     isClient && `${textColor} ${bgColor} blurred-or-opaque-bg-2`,
@@ -143,7 +144,7 @@ const IndexPage = ({
             props: { currentImage: currentImage?.base },
           });
           // eslint-disable-next-line
-          _paq.push(['trackEvent', 'Index', 'Shuffle', currentImage?.base]);
+          _paq.push(["trackEvent", "Index", "Shuffle", currentImage?.base]);
         } catch (e) {
           /* do nothing */
         }
diff --git a/src/styles/global.css b/src/styles/global.css
index 8b79002..5cfd22c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -32,26 +32,20 @@
   .scroll-padding-6 {
     scroll-padding: theme("spacing.6");
   }
-  .blurred-or-opaque-bg-1 {
-    @apply bg-opacity-70;
-  }
-  .blurred-or-opaque-bg-2 {
-    @apply bg-opacity-90;
-  }
   @supports (backdrop-filter: none) {
     .blurred-or-opaque-bg-1 {
       @apply bg-opacity-50 backdrop-filter backdrop-blur-lg;
     }
     .blurred-or-opaque-bg-2 {
-      @apply bg-opacity-70 backdrop-filter backdrop-blur;
+      @apply bg-opacity-60 backdrop-filter backdrop-blur;
     }
   }
   @supports not (backdrop-filter: none) {
     .blurred-or-opaque-bg-1 {
-      @apply bg-opacity-70;
+      @apply bg-opacity-60;
     }
     .blurred-or-opaque-bg-2 {
-      @apply bg-opacity-90;
+      @apply bg-opacity-70;
     }
   }
   @variants responsive {