From 4e48523a208f0afb79a9b357fc61a429de51fe29 Mon Sep 17 00:00:00 2001
From: helenclx <helenclx@users.noreply.github.com>
Date: Mon, 10 Jun 2024 11:31:35 +0000
Subject: [PATCH] deploy: bae2c4cb57163682d4459490c74cab01a5e341d9

---
 404.html                                      | 33 +++++++++----------
 about/index.html                              | 33 +++++++++----------
 accessibility/index.html                      | 33 +++++++++----------
 assets/css/blog.css                           |  2 +-
 assets/css/components.css                     |  6 ++--
 assets/css/content.css                        |  2 +-
 assets/css/general.css                        |  8 ++---
 assets/css/global.css                         | 17 +++++-----
 assets/css/projects.css                       |  2 +-
 blog/categories/100-days-of-code/index.html   | 33 +++++++++----------
 blog/categories/about-this-blog/index.html    | 33 +++++++++----------
 blog/categories/about-this-website/index.html | 33 +++++++++----------
 blog/categories/cassette-beasts/index.html    | 33 +++++++++----------
 blog/categories/cbpickaxe/index.html          | 33 +++++++++----------
 blog/categories/chingu/index.html             | 33 +++++++++----------
 blog/categories/cs50/index.html               | 33 +++++++++----------
 blog/categories/cs50x/index.html              | 33 +++++++++----------
 blog/categories/css/index.html                | 33 +++++++++----------
 blog/categories/eleventy/index.html           | 33 +++++++++----------
 blog/categories/flask/index.html              | 33 +++++++++----------
 blog/categories/freecodecamp/index.html       | 33 +++++++++----------
 blog/categories/github-pages/index.html       | 33 +++++++++----------
 blog/categories/github/index.html             | 33 +++++++++----------
 blog/categories/html/index.html               | 33 +++++++++----------
 blog/categories/index.html                    | 33 +++++++++----------
 blog/categories/javascript/index.html         | 33 +++++++++----------
 blog/categories/javascriptmas/index.html      | 33 +++++++++----------
 blog/categories/python/index.html             | 33 +++++++++----------
 blog/categories/react/index.html              | 33 +++++++++----------
 blog/categories/scrimba/index.html            | 33 +++++++++----------
 blog/categories/sql/index.html                | 33 +++++++++----------
 blog/index.html                               | 33 +++++++++----------
 blog/posts/1/index.html                       | 33 +++++++++----------
 .../index.html                                | 33 +++++++++----------
 .../index.html                                | 33 +++++++++----------
 .../index.html                                | 33 +++++++++----------
 .../index.html                                | 33 +++++++++----------
 .../index.html                                | 33 +++++++++----------
 .../index.html                                | 33 +++++++++----------
 .../index.html                                | 33 +++++++++----------
 .../index.html                                | 33 +++++++++----------
 .../index.html                                | 33 +++++++++----------
 .../index.html                                | 33 +++++++++----------
 .../index.html                                | 33 +++++++++----------
 .../index.html                                | 33 +++++++++----------
 .../index.html                                | 33 +++++++++----------
 .../index.html                                | 33 +++++++++----------
 blog/posts/index.html                         | 33 +++++++++----------
 colophon/index.html                           | 33 +++++++++----------
 contact/index.html                            | 33 +++++++++----------
 index.html                                    | 33 +++++++++----------
 now/index.html                                | 33 +++++++++----------
 projects/frontend-mentor/index.html           | 33 +++++++++----------
 projects/index.html                           | 33 +++++++++----------
 projects/quizzical/index.html                 | 33 +++++++++----------
 projects/recipe-hub/index.html                | 33 +++++++++----------
 projects/scrimba/index.html                   | 33 +++++++++----------
 projects/tenzies/index.html                   | 33 +++++++++----------
 58 files changed, 799 insertions(+), 954 deletions(-)

diff --git a/404.html b/404.html
index 70dc66f3..74843620 100644
--- a/404.html
+++ b/404.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/about/index.html b/about/index.html
index b7dd85aa..43ed6ed7 100644
--- a/about/index.html
+++ b/about/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/accessibility/index.html b/accessibility/index.html
index 16d238d5..7a121a88 100644
--- a/accessibility/index.html
+++ b/accessibility/index.html
@@ -102,7 +102,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -127,16 +127,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -179,10 +184,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -197,32 +198,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -241,7 +238,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/assets/css/blog.css b/assets/css/blog.css
index e464fa2c..59f9f344 100644
--- a/assets/css/blog.css
+++ b/assets/css/blog.css
@@ -15,7 +15,7 @@
 
 .blog__post--info {
     gap: 0.3em;
-    font-size: var(--sz-home-txt);
+    font-size: var(--fs-home-txt);
     margin-bottom: 2em;
 }
 
diff --git a/assets/css/components.css b/assets/css/components.css
index abe8b663..5fa85819 100644
--- a/assets/css/components.css
+++ b/assets/css/components.css
@@ -26,14 +26,14 @@
 
 .section--home {
     display: grid;
-    font-size: var(--sz-home-txt);
+    font-size: var(--fs-home-txt);
     padding: 2em 1em;
 }
 
 .section--home,
 .profile {
     max-width: 64rem;
-    font-size: var(--sz-home-txt);
+    font-size: var(--fs-home-txt);
     justify-self: center;
 }
 
@@ -153,7 +153,7 @@
     gap: 0.5em;
     flex-wrap: wrap;
     justify-content: center;
-    font-size: var(--sz-home-txt);
+    font-size: var(--fs-home-txt);
 }
 
 .breadcrumbs li::after {
diff --git a/assets/css/content.css b/assets/css/content.css
index 9101b66a..638f1244 100644
--- a/assets/css/content.css
+++ b/assets/css/content.css
@@ -13,7 +13,7 @@
 }
 
 .prose {
-    font-size: var(--sz-main-txt);
+    font-size: var(--fs-main-txt);
     color: var(--clr-slate-600);
     padding: 0 var(--sz-main-padding);
 }
diff --git a/assets/css/general.css b/assets/css/general.css
index 6d9c18a9..861e49d9 100644
--- a/assets/css/general.css
+++ b/assets/css/general.css
@@ -24,19 +24,19 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-    font-size: var(--sz-h1);
+    font-size: var(--fs-h1);
 }
 
 h2 {
-    font-size: var(--sz-h2);
+    font-size: var(--fs-h2);
 }
 
 h3 {
-    font-size: var(--sz-h3);
+    font-size: var(--fs-h3);
 }
 
 h4 {
-    font-size: var(--sz-h4);
+    font-size: var(--fs-h4);
 }
 
 code {
diff --git a/assets/css/global.css b/assets/css/global.css
index bedc34e3..c0cde9f4 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -18,17 +18,18 @@
     --clr-top-btn-bg: #4153b6;
     --clr-top-btn-txt: #fff;
 
-    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
-        0 4px 6px -4px rgb(0 0 0 / 0.2);
+    --fs-main-txt: 1.2rem;
+    --fs-home-txt: 1.15rem;
+    --fs-h1: clamp(2rem, 1rem + 5vw, 3rem);
+    --fs-h2: clamp(1.55rem, 1rem + 3vw, 2.15rem);
+    --fs-h3: clamp(1.55rem, 1rem + 3vw, 1.8rem);
+    --fs-h4: clamp(1.4rem, 1rem + 3vw, 1.6rem);
 
-    --sz-main-txt: 1.2rem;
-    --sz-home-txt: 1.15rem;
-    --sz-h1: clamp(2rem, 1rem + 5vw, 3rem);
-    --sz-h2: clamp(1.55rem, 1rem + 3vw, 2.15rem);
-    --sz-h3: clamp(1.55rem, 1rem + 3vw, 1.8rem);
-    --sz-h4: clamp(1.4rem, 1rem + 3vw, 1.6rem);
     --sz-main-padding: clamp(1em, 5%, 1.5em);
     --sz-paragraph-margin: 1.15em;
+
+    --bs-main: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
+        0 4px 6px -4px rgb(0 0 0 / 0.2);
 }
 
 /* ------------------- */
diff --git a/assets/css/projects.css b/assets/css/projects.css
index 0c1ea032..50ac2109 100644
--- a/assets/css/projects.css
+++ b/assets/css/projects.css
@@ -12,7 +12,7 @@
 }
 
 .project-card {
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--bs-main);
     border-radius: 0.375rem;
 }
 
diff --git a/blog/categories/100-days-of-code/index.html b/blog/categories/100-days-of-code/index.html
index 83e3ded7..af79024f 100644
--- a/blog/categories/100-days-of-code/index.html
+++ b/blog/categories/100-days-of-code/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/about-this-blog/index.html b/blog/categories/about-this-blog/index.html
index 9236e4af..de4b90b7 100644
--- a/blog/categories/about-this-blog/index.html
+++ b/blog/categories/about-this-blog/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/about-this-website/index.html b/blog/categories/about-this-website/index.html
index 943e4468..59a08159 100644
--- a/blog/categories/about-this-website/index.html
+++ b/blog/categories/about-this-website/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/cassette-beasts/index.html b/blog/categories/cassette-beasts/index.html
index 347b330e..a60dda51 100644
--- a/blog/categories/cassette-beasts/index.html
+++ b/blog/categories/cassette-beasts/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/cbpickaxe/index.html b/blog/categories/cbpickaxe/index.html
index 121fa8d1..1ad86e4a 100644
--- a/blog/categories/cbpickaxe/index.html
+++ b/blog/categories/cbpickaxe/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/chingu/index.html b/blog/categories/chingu/index.html
index b6739f97..addbd00f 100644
--- a/blog/categories/chingu/index.html
+++ b/blog/categories/chingu/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/cs50/index.html b/blog/categories/cs50/index.html
index c999b7f5..7e313f1f 100644
--- a/blog/categories/cs50/index.html
+++ b/blog/categories/cs50/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/cs50x/index.html b/blog/categories/cs50x/index.html
index 23efeb85..6a1a22f4 100644
--- a/blog/categories/cs50x/index.html
+++ b/blog/categories/cs50x/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/css/index.html b/blog/categories/css/index.html
index 983b4686..0e0ff648 100644
--- a/blog/categories/css/index.html
+++ b/blog/categories/css/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/eleventy/index.html b/blog/categories/eleventy/index.html
index 187b75ec..96920eaa 100644
--- a/blog/categories/eleventy/index.html
+++ b/blog/categories/eleventy/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/flask/index.html b/blog/categories/flask/index.html
index 2e508f4f..fd5d959c 100644
--- a/blog/categories/flask/index.html
+++ b/blog/categories/flask/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/freecodecamp/index.html b/blog/categories/freecodecamp/index.html
index a7507d1c..4daa75e8 100644
--- a/blog/categories/freecodecamp/index.html
+++ b/blog/categories/freecodecamp/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/github-pages/index.html b/blog/categories/github-pages/index.html
index 0f6c4ff0..9f104968 100644
--- a/blog/categories/github-pages/index.html
+++ b/blog/categories/github-pages/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/github/index.html b/blog/categories/github/index.html
index 95189e10..48f3cef7 100644
--- a/blog/categories/github/index.html
+++ b/blog/categories/github/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/html/index.html b/blog/categories/html/index.html
index e8289fdb..0b0082e9 100644
--- a/blog/categories/html/index.html
+++ b/blog/categories/html/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/index.html b/blog/categories/index.html
index 0df91335..483597e1 100644
--- a/blog/categories/index.html
+++ b/blog/categories/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/javascript/index.html b/blog/categories/javascript/index.html
index 7ebc9338..4bdff0e5 100644
--- a/blog/categories/javascript/index.html
+++ b/blog/categories/javascript/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/javascriptmas/index.html b/blog/categories/javascriptmas/index.html
index 95de0ef3..14f49198 100644
--- a/blog/categories/javascriptmas/index.html
+++ b/blog/categories/javascriptmas/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/python/index.html b/blog/categories/python/index.html
index 6dbd9a2b..8542621d 100644
--- a/blog/categories/python/index.html
+++ b/blog/categories/python/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/react/index.html b/blog/categories/react/index.html
index d4f6c03e..e544ea8b 100644
--- a/blog/categories/react/index.html
+++ b/blog/categories/react/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/scrimba/index.html b/blog/categories/scrimba/index.html
index 79114aa3..e9a29c4f 100644
--- a/blog/categories/scrimba/index.html
+++ b/blog/categories/scrimba/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/categories/sql/index.html b/blog/categories/sql/index.html
index 9b45d99a..af5fc422 100644
--- a/blog/categories/sql/index.html
+++ b/blog/categories/sql/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/index.html b/blog/index.html
index d4413f9b..566a213f 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/posts/1/index.html b/blog/posts/1/index.html
index 06ba868e..94e9bb62 100644
--- a/blog/posts/1/index.html
+++ b/blog/posts/1/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html b/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html
index 3958a5e3..ef344bff 100644
--- a/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html
+++ b/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html b/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html
index 9e184a4d..6b9c5cff 100644
--- a/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html
+++ b/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html b/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html
index e507a7b9..be501069 100644
--- a/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html
+++ b/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html b/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html
index 9115eecd..f5d9d700 100644
--- a/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html
+++ b/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/posts/2023-11-13-My-First-PR-in-Python/index.html b/blog/posts/2023-11-13-My-First-PR-in-Python/index.html
index 6f81dbb1..93445bb2 100644
--- a/blog/posts/2023-11-13-My-First-PR-in-Python/index.html
+++ b/blog/posts/2023-11-13-My-First-PR-in-Python/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html b/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html
index 36760004..7124d534 100644
--- a/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html
+++ b/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html b/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html
index 68d0bd8f..c967e6d3 100644
--- a/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html
+++ b/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html b/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html
index d9d25ac4..80f5ff81 100644
--- a/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html
+++ b/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html b/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html
index 4bf19429..48b74e9f 100644
--- a/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html
+++ b/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/posts/2024-04-15-cs50x-week-9-completed/index.html b/blog/posts/2024-04-15-cs50x-week-9-completed/index.html
index c30154cb..8533b0a7 100644
--- a/blog/posts/2024-04-15-cs50x-week-9-completed/index.html
+++ b/blog/posts/2024-04-15-cs50x-week-9-completed/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/posts/2024-04-22-now-page-for-my-website/index.html b/blog/posts/2024-04-22-now-page-for-my-website/index.html
index 0f661460..a0403c76 100644
--- a/blog/posts/2024-04-22-now-page-for-my-website/index.html
+++ b/blog/posts/2024-04-22-now-page-for-my-website/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/posts/2024-05-27-cs50x-course-completed/index.html b/blog/posts/2024-05-27-cs50x-course-completed/index.html
index 58e45293..0aebf759 100644
--- a/blog/posts/2024-05-27-cs50x-course-completed/index.html
+++ b/blog/posts/2024-05-27-cs50x-course-completed/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html b/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html
index f31399f3..32ae5127 100644
--- a/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html
+++ b/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html b/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html
index 2987b196..9af0dad3 100644
--- a/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html
+++ b/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/blog/posts/index.html b/blog/posts/index.html
index 6253a878..ffdf2602 100644
--- a/blog/posts/index.html
+++ b/blog/posts/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/colophon/index.html b/colophon/index.html
index 2b6008f2..128d87c9 100644
--- a/colophon/index.html
+++ b/colophon/index.html
@@ -102,7 +102,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -127,16 +127,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -179,10 +184,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -197,32 +198,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -241,7 +238,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/contact/index.html b/contact/index.html
index 2b11de4a..f14a197d 100644
--- a/contact/index.html
+++ b/contact/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/index.html b/index.html
index bf85e661..e6da1710 100644
--- a/index.html
+++ b/index.html
@@ -102,7 +102,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -127,16 +127,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -179,10 +184,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -197,32 +198,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -241,7 +238,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/now/index.html b/now/index.html
index 6aded1ea..e28d69fa 100644
--- a/now/index.html
+++ b/now/index.html
@@ -102,7 +102,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -127,16 +127,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -179,10 +184,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -197,32 +198,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -241,7 +238,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/projects/frontend-mentor/index.html b/projects/frontend-mentor/index.html
index 5b41ef67..1af807d1 100644
--- a/projects/frontend-mentor/index.html
+++ b/projects/frontend-mentor/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/projects/index.html b/projects/index.html
index da1bb0ac..cea55b29 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/projects/quizzical/index.html b/projects/quizzical/index.html
index 0c56db49..7bcb6428 100644
--- a/projects/quizzical/index.html
+++ b/projects/quizzical/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/projects/recipe-hub/index.html b/projects/recipe-hub/index.html
index 40298f8c..ec9d7bd8 100644
--- a/projects/recipe-hub/index.html
+++ b/projects/recipe-hub/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/projects/scrimba/index.html b/projects/scrimba/index.html
index ca8fd01d..2a4e1482 100644
--- a/projects/scrimba/index.html
+++ b/projects/scrimba/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }
diff --git a/projects/tenzies/index.html b/projects/tenzies/index.html
index 895cfddb..d47ed380 100644
--- a/projects/tenzies/index.html
+++ b/projects/tenzies/index.html
@@ -99,7 +99,7 @@ <h2 class="header__title">
         position: sticky;
         top: 0;
         background-color: var(--clr-body-bg);
-        box-shadow: var(--box-shadow);
+        box-shadow: var(--bs-main);
     }
 
     .header__title {
@@ -124,16 +124,21 @@ <h2 class="header__title">
         display: none;
     }
 
+    .header__navmenu--show {
+        display: grid;
+    }
+
     .header__links {
         list-style: none;
         padding: 0;
         margin: 0;
-        display: grid;
-        gap: 1.5em;
         font-size: 1.125rem;
         font-weight: 600;
         color: var(--clr-accent-600);
         text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em 1.5em;
     }
 
     .header__links [aria-current="page"],
@@ -176,10 +181,6 @@ <h2 class="header__title">
         font-size: 2rem;
     }
 
-    .header__links--show {
-        display: grid;
-    }
-
     /* For larger screen sizes */
     @media (min-width: 640px) {
         .header__title {
@@ -194,32 +195,28 @@ <h2 class="header__title">
         }
 
         .header__navmenu {
-            display: flex;
+            display: grid;
             padding: 0;
             margin: 0;
         }
-
-        .header__links {
-            display: flex;
-            flex-wrap: wrap;
-            flex-direction: row;
-        }
     }
 </style>
 
 <script defer>
     
     const headerToggle = document.querySelector(".header__toggle");
-    const headerNavMenu = document.querySelector(".header__navmenu");
+    const navMenuClass = ".header__navmenu";
+    const headerNavMenu = document.querySelector(navMenuClass);
+    const showNavClass = "header__navmenu--show";
     const headerLinkAll = document.querySelectorAll(".header__link");
 
     const openNavigation = () => {
-        headerNavMenu.classList.add("header__links--show");
+        headerNavMenu.classList.add(showNavClass);
         headerToggle.ariaExpanded = "true";
     };
 
     const closeNavigation = () => {
-        headerNavMenu.classList.remove("header__links--show");
+        headerNavMenu.classList.remove(showNavClass);
         headerToggle.ariaExpanded = "false";
     };
 
@@ -238,7 +235,7 @@ <h2 class="header__title">
     });
 
     const handleBlur = (event) => {
-        const navList = event.currentTarget.closest(".header__navmenu");
+        const navList = event.currentTarget.closest(navMenuClass);
         if (!event.relatedTarget || !navList.contains(event.relatedTarget)) {
             closeNavigation();
         }