Improve styles and compatibility

src/style/animations/animations.scss

@@ -1,9 +0,0 @@
-html[animations='off'] {
-  &,
-  *,
-  *::before,
-  *::after {
-    transition: none !important;
-    animation: none !important;
-  }
-}

src/style/animations/animations.ts

@@ -1,5 +0,0 @@
-export const turnOnAnimations = () =>
-  document.documentElement.setAttribute('animations', 'on');
-
-export const turnOffAnimations = () =>
-  document.documentElement.setAttribute('animations', 'off');

src/style/dark-mode/dark-mode.scss

@@ -1,5 +0,0 @@
-@mixin in-dark-mode() {
-  html[theme='dark'] {
-    @content;
-  }
-}

src/style/dark-mode/dark-mode.ts

@@ -1,8 +0,0 @@
-export const isSystemLevelDarkModeEnabled = (): boolean =>
-  matchMedia && matchMedia('(prefers-color-scheme: dark)').matches;
-
-export const turnOnDarkMode = () =>
-  document.documentElement.setAttribute('theme', 'dark');
-
-export const turnOnLightMode = () =>
-  document.documentElement.setAttribute('theme', 'light');

src/style/mixins.scss

@@ -12,6 +12,22 @@ $breakpoint-width: 925px !default;
   }
 }
 
+@mixin in-dark-mode() {
+  html[theme='dark'] {
+    @content;
+  }
+}
+
+html[animations='off'] {
+  &,
+  *,
+  *::before,
+  *::after {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
 @mixin image-button($icon-size) {
   display: block;
   box-sizing: content-box;
@@ -45,7 +61,12 @@ $breakpoint-width: 925px !default;
 
 @mixin blurred-background() {
   backdrop-filter: blur(var(--blur-radius));
-  @supports not (backdrop-filter: blur(var(--blur-radius))) {
+  -webkit-backdrop-filter: blur(var(--blur-radius));
+
+  @supports not (
+    (backdrop-filter: blur(var(--blur-radius))) or
+      (-webkit-backdrop-filter: blur(var(--blur-radius)))
+  ) {
     background-color: var(--card-color);
   }
 }

src/style/vars.scss

@@ -1,6 +1,4 @@
 @use 'mixins' as *;
-@use 'dark-mode/dark-mode' as *;
-@use 'animations/animations' as *;
 
 :root {
   --transition-time: 150ms;
@@ -27,7 +25,7 @@
     --shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.2);
     --inset-shadow: inset 0 -9px 7px -7px rgb(0, 0, 0, 0.15);
     --icon-size: 45px;
-    --large-icon-size: 80px;
+    --large-icon-size: 60px;
     --body-width: 765px;
   }
 }