diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index c71ec2b..6005d09 100644
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -1,5 +1,6 @@
 ---
 import "~/styles/globals.css"
+import "~/styles/view-transition.css"
 import { NoiseBackground } from "~/components/react/noise-background"
 import { getLangFromUrl } from "~/i18n/utils"
 import { GoogleAnalytics } from "astro-google-analytics"
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 545b8cb..c79a864 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,30 +1,2 @@
 @import "tailwindcss";
 @custom-variant dark (&:where(.dark, .dark *));
-
-/* Theme toggle effect */
-/* https://theme-toggle.rdsx.dev/ */
-/* https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API */
-::view-transition-group(root) {
-  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
-}
-
-::view-transition-new(root) {
-  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="0" cy="0" r="18" fill="white" filter="url(%23blur)"/></svg>')
-    top left / 0 no-repeat;
-  mask-origin: content-box;
-  animation: scale 1s;
-  transform-origin: top left;
-}
-
-::view-transition-old(root),
-.dark::view-transition-old(root) {
-  animation: scale 1s;
-  transform-origin: top left;
-  z-index: -1;
-}
-
-@keyframes scale {
-  to {
-    mask-size: 350vmax;
-  }
-}
diff --git a/src/styles/view-transition.css b/src/styles/view-transition.css
new file mode 100644
index 0000000..3ed19d4
--- /dev/null
+++ b/src/styles/view-transition.css
@@ -0,0 +1,27 @@
+/* Theme toggle effect */
+/* https://theme-toggle.rdsx.dev/ */
+/* https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API */
+::view-transition-group(root) {
+  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+::view-transition-new(root) {
+  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="0" cy="0" r="18" fill="white" filter="url(%23blur)"/></svg>')
+    top left / 0 no-repeat;
+  mask-origin: content-box;
+  animation: scale 1s;
+  transform-origin: top left;
+}
+
+::view-transition-old(root),
+.dark::view-transition-old(root) {
+  animation: scale 1s;
+  transform-origin: top left;
+  z-index: -1;
+}
+
+@keyframes scale {
+  to {
+    mask-size: 350vmax;
+  }
+}