diff --git a/src/pages/[lang]/blog/[...slug].astro b/src/pages/[lang]/blog/[...slug].astro
index 626b27f..b48dfa5 100644
--- a/src/pages/[lang]/blog/[...slug].astro
+++ b/src/pages/[lang]/blog/[...slug].astro
@@ -27,7 +27,7 @@ const { Content } = await page.render();
 <BlogPost {...page.data} language={lang}>
   <article class="prose prose-moi m-[auto] sm:prose-sm md:prose-md xl:prose-lg text-justify">
     <div class="text-center">
-      <h1 class="text-4xl">{page.data.title}</h1>
+      <h1 class="lg:text-4xl text-2xl">{page.data.title}</h1>
       <p>{page.data.author} • {formattedDate}</p>
     </div>
     <Content />
diff --git a/src/style/index.css b/src/style/index.css
index cdf0c64..5e695eb 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -8,109 +8,163 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
 */
 @layer base {
     :root {
-        --color-bkg: 0deg, 0%, 94%;
-        --color-bkgNavbar: 0deg, 0%, 50%;
-        --color-content: 240deg, 4%, 9%;
-        --color-primary: 54deg, 100%, 50%;
-        --color-secondary: 237deg, 100%, 93%;
-        --color-accent: 262deg, 73%, 47%;
-        --color-accent-red: 0deg, 84%, 60%;
-        --border: 214.3 31.8% 91.4%;
-        --prose-pink: 336, 93%, 16%;
+        /*
+            Light mode
+        */
+        --light-color-bkg: 0deg, 0%, 94%;
+        --light-color-bkgNavbar: 0deg, 0%, 50%;
+        --light-color-content: 240deg, 4%, 9%;
+        --light-color-primary: 54deg, 100%, 50%;
+        --light-color-secondary: 237deg, 100%, 93%;
+        --light-color-accent: 262deg, 73%, 47%;
+        --light-color-accent-red: 0deg, 84%, 60%;
+        --light-prose-pink: 336deg, 93%, 16%;
 
-        --background: 0 0% 100%;
-        --foreground: 222.2 47.4% 11.2%;
-        --input: 214.3 31.8% 91.4%;
-        --muted: 210 40% 96.1%;
-        --muted-foreground: 215.4 16.3% 46.9%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 222.2 47.4% 11.2%;
-        --border: 214.3 31.8% 91.4%;
-        --card: 0 0% 100%;
-        --card-foreground: 222.2 47.4% 11.2%;
-        --destructive: 0 100% 50%;
-        --destructive-foreground: 210 40% 98%;
-        --ring: 215 20.2% 65.1%;
-        --radius: 0.5rem;
+        --light-background: 0 0% 100%;
+        --light-foreground: 222.2 47.4% 11.2%;
+        --light-input: 214.3 31.8% 91.4%;
+        --light-muted: 210 40% 96.1%;
+        --light-muted-foreground: 215 17% 34%;
+        --light-popover: 0 0% 100%;
+        --light-popover-foreground: 222.2 47.4% 11.2%;
+        --light-border: 214.3 31.8% 91.4%;
+        --light-card: 0 0% 100%;
+        --light-card-foreground: 222.2 47.4% 11.2%;
+        --light-destructive: 0 100% 50%;
+        --light-destructive-foreground: 210 40% 98%;
+        --light-ring: 215 20.2% 65.1%;
+        --light-radius: 0.5rem;
+
+        /*
+            Dark mode colours
+        */
+        --dark-color-bkg: 0deg, 0%, 6%;
+        --dark-color-bkgNavbar: 0deg, 0%, 17%;
+        --dark-color-content: 240deg, 4%, 91%;
+        --dark-color-primary: 262deg, 77%, 44%;
+        --dark-color-secondary: 273deg, 100%, 20%;
+        --dark-color-accent: 54deg, 100%, 50%;
+        --dark-color-accent-red: 0deg, 84%, 60%;
+        --dark-prose-pink: 191deg, 51%, 53%;
+
+        --dark-background: 224 71% 4%;
+        --dark-foreground: 213 31% 91%;
+        --dark-input: 216 34% 17%;
+        --dark-muted: 0 0% 15%;
+        --dark-muted-foreground: 215.4 31% 71%;
+        --dark-popover: 224 71% 4%; /* merge to bkgNavbar */
+        --dark-popover-foreground: 215 20.2% 65.1%; /* merge to bkg */
+        --dark-border: 9 20% 21%;
+        --dark-card: 0 0% 15%;
+        --dark-card-foreground: 213 31% 91%;
+        --dark-destructive: 0 63% 31%;
+        --dark-destructive-foreground: 210 40% 98%;
+        --dark-ring: 216 34% 17%;
+        --dark-radius: 0.5rem;
+
+        /* DEFAULT to light mode */
+        --color-bkg: var(--light-color-bkg);
+        --color-bkgNavbar: var(--light-color-bkgNavbar);
+        --color-content: var(--light-color-content);
+        --color-primary: var(--light-color-primary);
+        --color-secondary: var(--light-color-secondary);
+        --color-accent: var(--light-color-accent);
+        --color-accent-red: var(--light-color-accent-red);
+        --prose-pink: var(--light-prose-pink);
+
+        --background: var(--light-background);
+        --foreground: var(--light-foreground);
+        --input: var(--light-input);
+        --muted: var(--light-muted);
+        --muted-foreground: var(--light-foreground);
+        --popover: var(--light-popover);
+        --popover-foreground: var(--light-popover-foreground);
+        --border: var(--light-border);
+        --card: var(--light-card);
+        --card-foreground: var(--light-card-foreground);
+        --destructive: var(--light-destructive);
+        --destructive-foreground: var(--light-destructive-foreground);
+        --ring: var(--light-ring);
+        --radius: var(--light-radius);
     }
 
     @media (prefers-color-scheme: dark) {
         :root {
-            --color-bkg: 0deg, 0%, 6%;
-            --color-bkgNavbar: 0deg, 0%, 17%;
-            --color-content: 240deg, 4%, 91%;
-            --color-primary: 262deg, 77%, 44%;
-            --color-secondary: 273deg, 100%, 20%;
-            --color-accent: 54deg, 100%, 50%;
-            --color-accent-red: 0deg, 84%, 60%;
-            --prose-pink: 191, 51%, 53%;
+            --color-bkg: var(--dark-color-bkg);
+            --color-bkgNavbar: var(--dark-color-bkgNavbar);
+            --color-content: var(--dark-color-content);
+            --color-primary: var(--dark-color-primary);
+            --color-secondary: var(--dark-color-secondary);
+            --color-accent: var(--dark-color-accent);
+            --color-accent-red: var(--dark-color-accent-red);
+            --prose-pink: var(--dark-prose-pink);
     
-            --background: 224 71% 4%;
-            --foreground: 213 31% 91%;
-            --input: 216 34% 17%;
-            --muted: 0 0% 15%;
-            --muted-foreground: 215.4 16.3% 56.9%;
-            --popover: 224 71% 4%;
-            --popover-foreground: 215 20.2% 65.1%;
-            --border: 9 20% 21%;
-            --card: 0 0% 15%;
-            --card-foreground: 213 31% 91%;
-            --destructive: 0 63% 31%;
-            --destructive-foreground: 210 40% 98%;
-            --ring: 216 34% 17%;
-            --radius: 0.5rem;
+            --background: var(--dark-background);
+            --foreground: var(--dark-foreground);
+            --input: var(--dark-input);
+            --muted: var(--dark-muted);
+            --muted-foreground: var(--dark-muted-foreground);
+            --popover: var(--dark-popover);
+            --popover-foreground: var(--dark-popover-foreground);
+            --border: var(--dark-border);
+            --card: var(--dark-card);
+            --card-foreground: var(--dark-card-foreground);
+            --destructive: var(--dark-destructive);
+            --destructive-foreground: var(--dark-destructive-foreground);
+            --ring: var(--dark-ring);
+            --radius: var(--dark-radius);
         }
     }
 
     :root[data-theme="theme_dark"] {
-        --color-bkg: 0deg, 0%, 6%;
-        --color-bkgNavbar: 0deg, 0%, 17%;
-        --color-content: 240deg, 4%, 91%;
-        --color-primary: 262deg, 77%, 44%;
-        --color-secondary: 273deg, 100%, 20%;
-        --color-accent: 54deg, 100%, 50%;
-        --color-accent-red: 0deg, 84%, 60%;
-        --prose-pink: 191, 51%, 53%;
+        --color-bkg: var(--dark-color-bkg);
+        --color-bkgNavbar: var(--dark-color-bkgNavbar);
+        --color-content: var(--dark-color-content);
+        --color-primary: var(--dark-color-primary);
+        --color-secondary: var(--dark-color-secondary);
+        --color-accent: var(--dark-color-accent);
+        --color-accent-red: var(--dark-color-accent-red);
+        --prose-pink: var(--dark-prose-pink);
 
-        --background: 224 71% 4%;
-        --foreground: 213 31% 91%;
-        --input: 216 34% 17%;
-        --muted: 0 0% 15%;
-        --muted-foreground: 215.4 16.3% 56.9%;
-        --popover: 224 71% 4%;
-        --popover-foreground: 215 20.2% 65.1%;
-        --border: 9 20% 21%;
-        --card: 0 0% 15%;
-        --card-foreground: 213 31% 91%;
-        --destructive: 0 63% 31%;
-        --destructive-foreground: 210 40% 98%;
-        --ring: 216 34% 17%;
-        --radius: 0.5rem;
+        --background: var(--dark-background);
+        --foreground: var(--dark-foreground);
+        --input: var(--dark-input);
+        --muted: var(--dark-muted);
+        --muted-foreground: var(--dark-muted-foreground);
+        --popover: var(--dark-popover);
+        --popover-foreground: var(--dark-popover-foreground);
+        --border: var(--dark-border);
+        --card: var(--dark-card);
+        --card-foreground: var(--dark-card-foreground);
+        --destructive: var(--dark-destructive);
+        --destructive-foreground: var(--dark-destructive-foreground);
+        --ring: var(--dark-ring);
+        --radius: var(--dark-radius);
     }
 
     :root[data-theme="theme_light"] {
-        --color-bkg: 0deg, 0%, 94%;
-        --color-bkgNavbar: 0deg, 0%, 50%;
-        --color-content: 240deg, 4%, 9%;
-        --color-primary: 54deg, 100%, 50%;
-        --color-secondary: 237deg, 100%, 93%;
-        --color-accent: 262deg, 73%, 47%;
-        --color-accent-red: 0deg, 84%, 60%;
-        --prose-pink: 336, 93%, 16%;
+        --color-bkg: var(--light-color-bkg);
+        --color-bkgNavbar: var(--light-color-bkgNavbar);
+        --color-content: var(--light-color-content);
+        --color-primary: var(--light-color-primary);
+        --color-secondary: var(--light-color-secondary);
+        --color-accent: var(--light-color-accent);
+        --color-accent-red: var(--light-color-accent-red);
+        --prose-pink: var(--light-prose-pink);
 
-        --background: 0 0% 100%;
-        --foreground: 222.2 47.4% 11.2%;
-        --input: 214.3 31.8% 91.4%;
-        --muted: 210 4% 85%;
-        --muted-foreground: 215.4 16.3% 46.9%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 222.2 47.4% 11.2%;
-        --border: 214.3 31.8% 91.4%;
-        --card: 0 0% 100%;
-        --card-foreground: 222.2 47.4% 11.2%;
-        --destructive: 0 100% 50%;
-        --destructive-foreground: 210 40% 98%;
-        --ring: 215 20.2% 65.1%;
-        --radius: 0.5rem;
+        --background: var(--light-background);
+        --foreground: var(--light-foreground);
+        --input: var(--light-input);
+        --muted: var(--light-muted);
+        --muted-foreground: var(--light-foreground);
+        --popover: var(--light-popover);
+        --popover-foreground: var(--light-popover-foreground);
+        --border: var(--light-border);
+        --card: var(--light-card);
+        --card-foreground: var(--light-card-foreground);
+        --destructive: var(--light-destructive);
+        --destructive-foreground: var(--light-destructive-foreground);
+        --ring: var(--light-ring);
+        --radius: var(--light-radius);
     }
 }
\ No newline at end of file