diff --git a/_includes/layouts/navbar.njk b/_includes/layouts/navbar.njk
index 271e347..ee0f37f 100644
--- a/_includes/layouts/navbar.njk
+++ b/_includes/layouts/navbar.njk
@@ -21,7 +21,6 @@
     <a class="nav-base nav-left nav-links nav-home" href="/"><span class="tabler--home"></span> <span class="text">Home</span></a>
     <a class="nav-base nav-left nav-links nav-webmaster" href="/~sneexy"><span class="tabler--user"></span> <span class="text">The webmaster</span></a>
     <a class="nav-base nav-left nav-links nav-donate" href="/donate"><span class="tabler--currency-dollar"></span> <span class="text">Donate</span></a>
-    
     <div class="nav-base nav-right nav-settings">
         <input type="checkbox" id="nav-settings-menu" value="" name="nav-settings-menu">
         <label aria-label="Settings" for="nav-settings-menu" data-toggle="nav-settings">
diff --git a/_includes/styles/accessibility.css b/_includes/styles/accessibility.css
index fc586c1..a553e96 100644
--- a/_includes/styles/accessibility.css
+++ b/_includes/styles/accessibility.css
@@ -60,27 +60,30 @@
     }
 }
 
-/* disable window animations */
+/* disable window animations 
+   copy pasted from "@media (prefers-reduced-motion: reduce)" in base.css */
 :root:has(#disable-animations:checked) {
-    .window {
+    body {
+        background: var(--background) !important;
         animation: unset !important;
-        transition: unset !important;
+        -moz-animation: unset !important;
+        -webkit-animation: unset !important;
     }
 
-    .window:hover {
-        transition: unset !important;
+    /* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */
+    * {
+        transition: none !important;
         animation: unset !important;
-        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
+        -moz-animation: unset !important;
+        -webkit-animation: unset !important;
     }
 
-    .navbar {
-        transition: unset !important;
+    /* fedi icon on /me should keep its animation (temp, find a better solution later) */
+    .fedi-icon {
+        animation: opacity-blink 4s infinite !important;
     }
-
-    .navbar:hover {
-        transition: unset !important;
-        animation: unset !important;
-        background-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
+    .fedi-icon-2 {
+        animation: opacity-blink-reverse 4s infinite !important;
     }
 }
 
diff --git a/_includes/styles/navbar.css b/_includes/styles/navbar.css
index e11d4c2..f64ccd9 100644
--- a/_includes/styles/navbar.css
+++ b/_includes/styles/navbar.css
@@ -159,12 +159,12 @@
         outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
         padding: unset !important; /* unset the padding for the button itself so the button can take the padding to make the entire button clickable */
 
-        input[type="checkbox"] {
+        input[type="checkbox"]#nav-settings-menu {
             left: -100vw;
             position: absolute;
         }
 
-        label {
+        label[data-toggle="nav-settings"] {
             cursor: pointer;
             overflow: hidden !important;
             padding: .3rem .5rem !important;
@@ -178,7 +178,7 @@
             }
         }
 
-        label:hover {
+        label[data-toggle="nav-settings"]:hover {
             [class^="tabler--"] {
                 transform: translateY(.1rem) scale(1.5) rotate(360deg);
                 transition: all 1.3s;