Make that damn button the most important thing you've seen in your life

src/components/AccssibilityBox/AccessibilityBox.tsx

@@ -12,7 +12,7 @@ export default function AccessibilityBox() {
     }
   }, []);
   return (
-    <Floaty top>
+    <Floaty top important>
       <input
         id="accessibility"
         type="checkbox"

src/components/Floaty/Floaty.module.css

@@ -38,6 +38,17 @@
   right: 64px;
 }
 
+.FloatyImportant {
+  display: inline-block;
+  z-index: 8 !important;
+  padding: 16px;
+  background-color: var(--backgroundColor);
+  min-width: 0;
+  max-width: none;
+  border: 1px solid var(--color);
+  /* width: 200px; */
+}
+
 @media only screen and (max-width: 875px) {
   .Floaty {
     position: static !important;

src/components/Floaty/Floaty.tsx

@@ -3,23 +3,25 @@ import styles from "./Floaty.module.css";
 export default function Floaty({
   children,
   top = false,
+  important = false,
   start = false,
   keepFloat = false,
   sticky = false,
 }: {
   children?: React.ReactNode;
   top?: boolean;
+  important?: boolean;
   start?: boolean;
   keepFloat?: boolean;
   sticky?: boolean;
 }) {
   return (
     <div
-      className={`${styles.Floaty} ${top ? styles.FloatyTop : ""} ${
-        start ? styles.FloatyStart : ""
-      } ${keepFloat ? styles.FloatyKeep : ""} ${
-        sticky ? styles.FloatySticky : ""
-      } FL-collapse-on-a11y`}
+      className={`${styles.Floaty} ${important ? styles.FloatyImportant : ""} ${
+        top ? styles.FloatyTop : ""
+      } ${start ? styles.FloatyStart : ""} ${
+        keepFloat ? styles.FloatyKeep : ""
+      } ${sticky ? styles.FloatySticky : ""} FL-collapse-on-a11y`}
     >
       {children}
     </div>