diff --git a/_includes/base.webc b/_includes/base.webc
index 26e5024..fddd17a 100644
--- a/_includes/base.webc
+++ b/_includes/base.webc
@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="color-scheme" content="dark light">
   <title @text="site.name"></title>
 
   <meta name="generator" :content="site.generator">
diff --git a/_includes/components/nav-link.webc b/_includes/components/nav-link.webc
index e5ea6c1..5011871 100644
--- a/_includes/components/nav-link.webc
+++ b/_includes/components/nav-link.webc
@@ -17,8 +17,8 @@ customElements.define('nav-link', NavLink)
 
 <style webc:scoped>
 :host {
-  --color-solid: var(--primary-colour);
-  --color-transparent: var(--primary-colour-25);
+  --colour-solid: var(--primary-colour);
+  --colour-transparent: var(--primary-colour-25);
   display: flex;
   position: relative;
   color: var(--color-transparent);
diff --git a/_includes/components/nav-primary.webc b/_includes/components/nav-primary.webc
index 74a7c7d..b67401e 100644
--- a/_includes/components/nav-primary.webc
+++ b/_includes/components/nav-primary.webc
@@ -135,14 +135,13 @@ ul.active {
   padding: 0;
   font-size: 33vw;
   opacity: 0;
+  color: var(--neutral-100);
   transform: translateY(100px);
   transform-origin: bottom left;
-  mix-blend-mode: difference;
   transition: opacity ease-in-out 0.1s, transform ease-in-out 0.1s;
 }
 
 #menuItem h1.active {
-  mix-blend-mode: difference;
   opacity: 1 !important;
   transform: translateY(-600px) !important;
 }
diff --git a/assets/css/main.css b/assets/css/main.css
index 1f431c8..86d7d6a 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -8,35 +8,32 @@
 /* --> BASE STYLES <-- */
 :root {
   --page-margin-inline: 1em;
-  /* --neutral-900: #1e1e3cff; */
-  /* --neutral-900-25: #1e1e3c33; */
   --neutral-900: #080c11ff;
   --neutral-900-25: #080c1133;
   --neutral-100: #c7c7c7ff;
   --neutral-100-25: #c7c7c733;
 
-  --primary-colour: var(--netural-900);
-  --primary-colour-25: var(--netural-900-25);
+  --primary-colour: var(--neutral-900);
+  --primary-colour-25: var(--neutral-900-25);
   --bg-colour: #fcfcfcff;
   --bg-colour-25: #fcfcfc33;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --primary-colour: var(--neutral-100);
-    --primary-colour-25: var(--neutral-100-25);
-    --bg-colour: var(--neutral-900);
-    --bg-colour-25: var(--neutral-900-25);
-  }
-}
-
-
 body {
   font-family: 'fira code', monospace;
   color: var(--primary-colour);
   background-color: var(--bg-colour);
 }
 
+@media (prefers-color-scheme: dark) {
+  body {
+    --primary-colour: var(--neutral-100);
+    --primary-colour-25: var(--neutral-100-25);
+    --bg-colour: var(--neutral-900);
+    --bg-colour-25: var(--neutral-900-25);
+  }
+}
+
 p {
   max-width: 80ch;
 }
@@ -52,7 +49,6 @@ em {
 
 a, a:visited {
   color: var(--primary-colour);
-  padding-bottom: 2px;
   text-decoration: none;
   border-bottom: 1px var(--primary-colour) solid;
   transition: color ease 0.5s, border ease 0.2s;
@@ -61,7 +57,7 @@ a, a:visited {
 img {
   max-width: 100%;
   height: auto;
-  outline: 1px dotted var(--neutral-900);
+  outline: 1px dotted var(--bg-colour);
 }
 
 hr {