diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 4d4b2e8..94bcd14 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -25,21 +25,6 @@ import Logo from "../assets/logo.svg";
   </div>
 </nav>
 
-<style is:global>
-  body:has(nav a[href="/"]:hover) {
-    --accent-base: var(--accent-base--default);
-  }
-  body:has(nav a[href="/portfolio"]:hover) {
-    --accent-base: var(--accent-base--portfolio);
-  }
-  body:has(nav a[href="/blog"]:hover) {
-    --accent-base: var(--accent-base--blog);
-  }
-  body:has(nav a[href="/book"]:hover) {
-    --accent-base: var(--accent-base--book);
-  }
-</style>
-
 <style>
   .main-nav {
     position: sticky;
diff --git a/src/styles/global.css b/src/styles/global.css
index dc8839b..a9d446b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,5 +1,6 @@
 *, *::before, *::after {
   box-sizing: border-box;
+  transition: color .4s ease, background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
 }
 
 @view-transition {
@@ -122,6 +123,11 @@ body[data-theme="book"] {
   --bg-image-static: url('../assets/backgrounds/curve-ripple-static.svg');
 }
 
+body:has(nav a[href="/"]:hover) { --accent-base: var(--accent-base--default);}
+body:has(nav a[href="/portfolio"]:hover), body:has(.portfolio:hover) { --accent-base: var(--accent-base--portfolio); }
+body:has(nav a[href="/blog"]:hover), body:has(.blog:hover) { --accent-base: var(--accent-base--blog); }
+body:has(nav a[href="/book"]:hover), body:has(.book:hover) { --accent-base: var(--accent-base--book); }
+
 html {
   background-color: var(--bg-color);
 }