From ffe2e3bfb3c20c4d857c13e1e1bc6062f893f996 Mon Sep 17 00:00:00 2001
From: helenclx <helenclx@users.noreply.github.com>
Date: Fri, 7 Jun 2024 09:48:58 +0000
Subject: [PATCH] deploy: e5b8b1681a0ed30ac6a4fc7ba02fa290337bab16

---
 404.html                                      | 43 +++++----------
 about/index.html                              | 43 +++++----------
 accessibility/index.html                      | 43 +++++----------
 blog/categories/100-days-of-code/index.html   | 43 +++++----------
 blog/categories/about-this-blog/index.html    | 43 +++++----------
 blog/categories/about-this-website/index.html | 43 +++++----------
 blog/categories/cassette-beasts/index.html    | 43 +++++----------
 blog/categories/cbpickaxe/index.html          | 43 +++++----------
 blog/categories/chingu/index.html             | 43 +++++----------
 blog/categories/cs50/index.html               | 43 +++++----------
 blog/categories/cs50x/index.html              | 43 +++++----------
 blog/categories/css/index.html                | 43 +++++----------
 blog/categories/eleventy/index.html           | 43 +++++----------
 blog/categories/flask/index.html              | 43 +++++----------
 blog/categories/freecodecamp/index.html       | 43 +++++----------
 blog/categories/github-pages/index.html       | 43 +++++----------
 blog/categories/github/index.html             | 43 +++++----------
 blog/categories/html/index.html               | 43 +++++----------
 blog/categories/index.html                    | 43 +++++----------
 blog/categories/javascript/index.html         | 43 +++++----------
 blog/categories/javascriptmas/index.html      | 43 +++++----------
 blog/categories/python/index.html             | 43 +++++----------
 blog/categories/react/index.html              | 43 +++++----------
 blog/categories/scrimba/index.html            | 43 +++++----------
 blog/categories/sql/index.html                | 43 +++++----------
 blog/index.html                               | 43 +++++----------
 blog/posts/1/index.html                       | 43 +++++----------
 .../index.html                                | 43 +++++----------
 .../index.html                                | 43 +++++----------
 .../index.html                                | 43 +++++----------
 .../index.html                                | 43 +++++----------
 .../index.html                                | 43 +++++----------
 .../index.html                                | 43 +++++----------
 .../index.html                                | 43 +++++----------
 .../index.html                                | 43 +++++----------
 .../index.html                                | 43 +++++----------
 .../index.html                                | 43 +++++----------
 .../index.html                                | 43 +++++----------
 .../index.html                                | 43 +++++----------
 .../index.html                                | 43 +++++----------
 .../index.html                                | 43 +++++----------
 blog/posts/index.html                         | 43 +++++----------
 colophon/index.html                           | 55 +++++--------------
 contact/index.html                            | 43 +++++----------
 index.html                                    | 43 +++++----------
 now/index.html                                | 43 +++++----------
 projects/frontend-mentor/index.html           | 43 +++++----------
 projects/index.html                           | 43 +++++----------
 projects/quizzical/index.html                 | 43 +++++----------
 projects/recipe-hub/index.html                | 43 +++++----------
 projects/scrimba/index.html                   | 43 +++++----------
 projects/tenzies/index.html                   | 43 +++++----------
 52 files changed, 780 insertions(+), 1468 deletions(-)

diff --git a/404.html b/404.html
index 809c6fbc..670139b0 100644
--- a/404.html
+++ b/404.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             <h2 class="heading--main text-center">Oops! Content not found.</h2>
 
diff --git a/about/index.html b/about/index.html
index 9c025f47..1ff2f808 100644
--- a/about/index.html
+++ b/about/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/accessibility/index.html b/accessibility/index.html
index b683306b..cac0c7e1 100644
--- a/accessibility/index.html
+++ b/accessibility/index.html
@@ -51,8 +51,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -101,15 +102,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -117,6 +122,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -174,13 +183,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -212,22 +215,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/100-days-of-code/index.html b/blog/categories/100-days-of-code/index.html
index a783c657..e0b3a6b0 100644
--- a/blog/categories/100-days-of-code/index.html
+++ b/blog/categories/100-days-of-code/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/about-this-blog/index.html b/blog/categories/about-this-blog/index.html
index 76436640..91bbf43c 100644
--- a/blog/categories/about-this-blog/index.html
+++ b/blog/categories/about-this-blog/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/about-this-website/index.html b/blog/categories/about-this-website/index.html
index f9ec782c..359d3e52 100644
--- a/blog/categories/about-this-website/index.html
+++ b/blog/categories/about-this-website/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/cassette-beasts/index.html b/blog/categories/cassette-beasts/index.html
index ede0326f..b9d221f4 100644
--- a/blog/categories/cassette-beasts/index.html
+++ b/blog/categories/cassette-beasts/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/cbpickaxe/index.html b/blog/categories/cbpickaxe/index.html
index 001deb98..3c0e2cff 100644
--- a/blog/categories/cbpickaxe/index.html
+++ b/blog/categories/cbpickaxe/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/chingu/index.html b/blog/categories/chingu/index.html
index 9b725141..fe0b09c5 100644
--- a/blog/categories/chingu/index.html
+++ b/blog/categories/chingu/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/cs50/index.html b/blog/categories/cs50/index.html
index 47b03d6d..7d95eaf4 100644
--- a/blog/categories/cs50/index.html
+++ b/blog/categories/cs50/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/cs50x/index.html b/blog/categories/cs50x/index.html
index 45523169..53c3dca3 100644
--- a/blog/categories/cs50x/index.html
+++ b/blog/categories/cs50x/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/css/index.html b/blog/categories/css/index.html
index d20bb4ee..0b5d3783 100644
--- a/blog/categories/css/index.html
+++ b/blog/categories/css/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/eleventy/index.html b/blog/categories/eleventy/index.html
index a7c71f4c..785cd789 100644
--- a/blog/categories/eleventy/index.html
+++ b/blog/categories/eleventy/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/flask/index.html b/blog/categories/flask/index.html
index dc0eb114..3002b72e 100644
--- a/blog/categories/flask/index.html
+++ b/blog/categories/flask/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/freecodecamp/index.html b/blog/categories/freecodecamp/index.html
index 0d43fb29..38e93a5b 100644
--- a/blog/categories/freecodecamp/index.html
+++ b/blog/categories/freecodecamp/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/github-pages/index.html b/blog/categories/github-pages/index.html
index 981e3d6c..548d18f7 100644
--- a/blog/categories/github-pages/index.html
+++ b/blog/categories/github-pages/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/github/index.html b/blog/categories/github/index.html
index 55983f25..f724c4c7 100644
--- a/blog/categories/github/index.html
+++ b/blog/categories/github/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/html/index.html b/blog/categories/html/index.html
index 30ffe650..a560daf6 100644
--- a/blog/categories/html/index.html
+++ b/blog/categories/html/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/index.html b/blog/categories/index.html
index 3427c963..5e4867cb 100644
--- a/blog/categories/index.html
+++ b/blog/categories/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/javascript/index.html b/blog/categories/javascript/index.html
index 4bf17cf8..d2b7db8c 100644
--- a/blog/categories/javascript/index.html
+++ b/blog/categories/javascript/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/javascriptmas/index.html b/blog/categories/javascriptmas/index.html
index 7dd3b2be..3d73b980 100644
--- a/blog/categories/javascriptmas/index.html
+++ b/blog/categories/javascriptmas/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/python/index.html b/blog/categories/python/index.html
index 6425d7ba..1fb65c7e 100644
--- a/blog/categories/python/index.html
+++ b/blog/categories/python/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/react/index.html b/blog/categories/react/index.html
index a96e18c3..12698cbd 100644
--- a/blog/categories/react/index.html
+++ b/blog/categories/react/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/scrimba/index.html b/blog/categories/scrimba/index.html
index 5e43d6db..b0b14b96 100644
--- a/blog/categories/scrimba/index.html
+++ b/blog/categories/scrimba/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/categories/sql/index.html b/blog/categories/sql/index.html
index d50f78b8..c599458a 100644
--- a/blog/categories/sql/index.html
+++ b/blog/categories/sql/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/index.html b/blog/index.html
index 9e5ee77c..8953f26a 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/posts/1/index.html b/blog/posts/1/index.html
index 4961496a..5e41ab83 100644
--- a/blog/posts/1/index.html
+++ b/blog/posts/1/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
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 c14bcd59..299f68e6 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
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
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 00fc48c9..2e629383 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
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
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 7f32f5f7..1029ddf1 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
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
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 bd929029..ccb3df40 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
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
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 5d87380c..34eaf4db 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
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
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 8d359fc2..465db907 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
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
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 92d8a0bf..5d385dfe 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
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
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 ebc50850..df65da05 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
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
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 01446740..45cfd838 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
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
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 4bf4036c..0fb8013b 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
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
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 664cd05a..65acc1eb 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
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
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 3222772c..bec1ef74 100644
--- a/blog/posts/2024-05-27-cs50x-course-completed/index.html
+++ b/blog/posts/2024-05-27-cs50x-course-completed/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
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 520d62f2..846baf73 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
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
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 0265eb26..c7454293 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
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/blog/posts/index.html b/blog/posts/index.html
index b684d5ac..6bf46b45 100644
--- a/blog/posts/index.html
+++ b/blog/posts/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/colophon/index.html b/colophon/index.html
index 69522c57..bcc5df5a 100644
--- a/colophon/index.html
+++ b/colophon/index.html
@@ -51,8 +51,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -101,15 +102,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -117,6 +122,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -174,13 +183,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -212,22 +215,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
@@ -279,18 +266,6 @@ <h2>Credits</h2>
 <li>Raymond Camden for providing inspiration with the tutorial: <a href="https://cfjedimaster.github.io/eleventy-blog-guide/guide.html">A Complete Guide to Building a Blog with Eleventy</a></li>
 <li>Eleventy's official <a href="https://github.com/11ty/eleventy-base-blog">blog starter project</a> for the inspiration</li>
 </ul>
-<h2>JavaScript</h2>
-<p>Due to this website being built with a static site generator, JavaScript is used to create dynamic and interactive components of this site. Here is a list of how JavaScript is used on this site:</p>
-<ul>
-<li>When this site is viewed on mobile devices, the navigation bar utilises a button that uses JavaScript to toggle the display of the navigation links when the button is clicked.</li>
-<li>Every page has a button on the bottom right corner to allow you to quickly scroll to the top of the page. This scroll-to-top button uses JavaScript to show or hide the button based on scroll position.
-<ul>
-<li>A &quot;Back to top&quot; link that does not use JavaScript is available on each page's bottom footer, but the JavaScript version allows visitors to quickly scroll to the top page without needing to reach the bottom footer.</li>
-</ul>
-</li>
-<li><a href="https://www.websitecarbon.com/badge/">Website Carbon Badge</a>, which is placed on the home page, uses JavaScript to calculate the carbon footprint of this website.</li>
-</ul>
-<p>You can still access most of the content of this site with JavaScript disabled, but the above components will not work as intended.</p>
 
 
 <p>(This colophon page was last updated on 7 June 2024)</p>
diff --git a/contact/index.html b/contact/index.html
index 0f146c5a..04db6e29 100644
--- a/contact/index.html
+++ b/contact/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/index.html b/index.html
index a2ea0ba0..1aebf85d 100644
--- a/index.html
+++ b/index.html
@@ -51,8 +51,9 @@
     <h2 class="header__title">
         <a aria-current="page" href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -101,15 +102,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -117,6 +122,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -174,13 +183,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -212,22 +215,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <h1 class="visually-hidden">Home Page</h1>
diff --git a/now/index.html b/now/index.html
index a47e8798..94b3c0b8 100644
--- a/now/index.html
+++ b/now/index.html
@@ -51,8 +51,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -101,15 +102,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -117,6 +122,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -174,13 +183,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -212,22 +215,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/projects/frontend-mentor/index.html b/projects/frontend-mentor/index.html
index 7ecf962c..26d0dc31 100644
--- a/projects/frontend-mentor/index.html
+++ b/projects/frontend-mentor/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             <div class="project--page">
     <header class="main__header">
diff --git a/projects/index.html b/projects/index.html
index 82883dcd..fa3ba0e7 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             
 <header class="main__header">
diff --git a/projects/quizzical/index.html b/projects/quizzical/index.html
index bbe4de54..f75f24ad 100644
--- a/projects/quizzical/index.html
+++ b/projects/quizzical/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             <div class="project--page">
     <header class="main__header">
diff --git a/projects/recipe-hub/index.html b/projects/recipe-hub/index.html
index 9eb26c97..e50cbc8b 100644
--- a/projects/recipe-hub/index.html
+++ b/projects/recipe-hub/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             <div class="project--page">
     <header class="main__header">
diff --git a/projects/scrimba/index.html b/projects/scrimba/index.html
index 4040ca59..e9938943 100644
--- a/projects/scrimba/index.html
+++ b/projects/scrimba/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             <div class="project--page">
     <header class="main__header">
diff --git a/projects/tenzies/index.html b/projects/tenzies/index.html
index 1eb12e41..9ec94210 100644
--- a/projects/tenzies/index.html
+++ b/projects/tenzies/index.html
@@ -48,8 +48,9 @@
     <h2 class="header__title">
         <a  href="/">Helen Chong</a>
     </h2>
-    <h2 class="visually-hidden">Navigation Links:</h2>
-    <button class="header__toggle" aria-label="Toggle navigation menu">☰</button>
+    <input type="checkbox" name="navigation" id="nav-toggle" class="visually-hidden">
+    <label for="nav-toggle" aria-label="Navigation menu toggle" class="header__control">☰</label>
+    <h2 class="visually-hidden">Navigation Links</h2>
     <ul class="header__links">
         
             <li><a
@@ -98,15 +99,19 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         box-shadow: var(--box-shadow);
     }
 
-    .header__title {
+    .header__title,
+    .header__control {
         color: var(--clr-accent-600);
-        text-transform: uppercase;
         font-size: 2rem;
+    }
+
+    .header__title {
+        text-transform: uppercase;
         margin: 0;
     }
 
     .header__title a:focus,
-    .header__toggle:focus {
+    #nav-toggle:focus + .header__control {
         outline: 0.12em solid var(--clr-accent-600);
     }
 
@@ -114,6 +119,10 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         text-decoration: none;
     }
 
+    .header__control:hover {
+        cursor: pointer;
+    }
+
     .header__links {
         list-style: none;
         padding-left: 0;
@@ -171,13 +180,7 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         outline-offset: 0.1em;
     }
 
-    .header__toggle {
-        border: none;
-        background-color: transparent;
-        font-size: 2rem;
-    }
-
-    .header__links--show {
+    #nav-toggle:checked ~ .header__links {
         transform: translateX(0);
     }
 
@@ -209,22 +212,6 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         }
     }
 </style>
-
-<script defer>
-    const headerToggle = document.querySelector('.header__toggle');
-    const headerLinks = document.querySelector(".header__links");
-    const headerLinkAll = document.querySelectorAll('.header__link');
-
-    headerToggle.addEventListener('click', () => {
-        headerLinks.classList.toggle("header__links--show");
-    });
-
-    headerLinkAll.forEach((link) => {
-        link.addEventListener('click', () => {
-            headerLinks.classList.remove("header__links--show");
-        });
-    });
-</script>
         <main id="content">
             <div class="project--page">
     <header class="main__header">