diff --git a/css/style.scss b/css/style.scss
index e84a050..aa69b18 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -5,285 +5,279 @@
   font-weight: normal;
   font-style: normal;
 }
-
 @font-face {
   font-family: "cuprumregular";
-  src: url("../assets/fonts/cuprum-variablefont_wght-webfont.woff")
-      format("woff2"),
-    url("../assets/fonts/cuprum-variablefont_wght-webfont.woff") format("woff");
+  src: url("../assets/fonts/cuprum-variablefont_wght-webfont.woff") format("woff2"), url("../assets/fonts/cuprum-variablefont_wght-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }
-$background-color_light: #f5f5f5;
-$primary-font: "montserrat";
-$box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.18);
-
 /* Define other theme-related styles here */
-
 * {
   margin: 0;
   padding: 0;
-  transition: all .6s;
+  transition: all 0.6s;
 }
-html{
+
+html {
   scroll-behavior: smooth;
 }
+
 body {
-  background-color: $background-color_light;
-  font-family: $primary-font;
+  background-color: #f5f5f5;
+  font-family: "montserrat";
 }
 
-
 .nav {
-  background-color: $background-color_light;
+  background-color: #f5f5f5;
   padding: 10px 0;
   margin-bottom: 20px;
   border-radius: 5px;
   margin: auto 2em;
   padding: 2em;
   position: relative;
-  box-shadow: $box-shadow;
-  a {
-    color: #000;
-    text-decoration: none;
-    font-weight: bold;
-    text-align: center;
-    &:hover {
-      color: #000;
-      text-decoration: underline;
-    }
-    .title-wrap {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      img {
-        width: 45px;
-        border-radius: 50%;
-        margin: 0 1em;
-      }
-      h1 {
-        font-family: $primary-font;
-        font-size: 20px;
-        text-align: center;
-      }
-    }
-  }
-
- 
-  
-  .toggle-container {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    display: flex;
-    align-items: center;
-}
-.toggle-label {
-    margin-right: 10px;
-    font-family: $primary-font;
-}
-#theme-toggle{
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.18);
+  /* Define styles for the toggle switch */
+}
+.nav a {
+  color: #000;
+  text-decoration: none;
+  font-weight: bold;
+  text-align: center;
+}
+.nav a:hover {
+  color: #000;
+  text-decoration: underline;
+}
+.nav a .title-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.nav a .title-wrap img {
+  width: 45px;
+  border-radius: 50%;
+  margin: 0 1em;
+}
+.nav a .title-wrap h1 {
+  font-family: "montserrat";
+  font-size: 20px;
+  text-align: center;
+}
+.nav .toggle-container {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  align-items: center;
+}
+.nav .toggle-label {
+  margin-right: 10px;
+  font-family: "montserrat";
+  color: black;
+}
+.nav #theme-toggle {
   visibility: hidden;
 }
-/* Define styles for the toggle switch */
-.toggle-switch {
-    position: relative;
-    display: inline-block;
-    width: 55px;
-    height: 22px;
-    border:1px solid black;
-    background-color: #ccc;
-    border-radius: 20px;
-}
-.slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    line-height: 0;
-    background-color: yellow;
-    border-radius: 20px;
-    transition: 0.5s;
-}
-.slider:before {
-    content: '🌑'; /* Default to Dark theme emoji */
-    position: absolute;
-    transform: translateX(5px);
-    top: 50%;
-    left: 0;
-    transform: translate(0, -50%);
-    transition: all .6s ease;
-}
-input:checked + .slider {
-    background-color: #fff;
-}
-input:checked + .slider:before {
-    content: '☀️'; /* Change to Light theme emoji when checked */
-    left: calc(100% - 0px);
-    transform: translate(-100%, -50%);
-}
-input:focus + .slider {
-    box-shadow: 0 0 1px #fff;
+.nav .toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 26px;
+  border: 1px solid black;
+  background-color: #000000;
+  border-radius: 50px;
+}
+.nav .slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  line-height: 0;
+  background-color: rgb(255, 255, 198);
+  border-radius: 50px;
+  border: 1px solid black;
+  transition: 0.1s;
+}
+.nav .slider:before {
+  content: "🌑"; /* Default to Dark theme emoji */
+  position: absolute;
+  transform: translateX(5px);
+  top: 53%;
+  left: 0;
+  transform: translate(-2, -25%);
+  transition: all 0.6s ease;
+}
+.nav input:checked + .slider {
+  background-color: #fff;
+}
+.nav input:checked + .slider:before {
+  content: "☀️"; /* Change to Light theme emoji when checked */
+  left: calc(95% - 0px);
+  transform: translate(-110%, -50%);
 }
+.nav input:focus + .slider {
+  box-shadow: 0 0 1px #fff;
 }
+
 main {
   margin: 2em;
   display: flex;
-  .vertical-nav {
-    background-color: $background-color_light;
-    box-shadow: $box-shadow;
-    border-radius: 5px;
-    margin-right: 2em;
-    padding: 2em;
-    min-width: 180px;
-    height: calc(100vh - 0px);
-    top: 0;
-    position: sticky;
-    .nav-content {
-      display: flex;
-      align-items: center;
-      img {
-        width: 5em;
-        height: 4.2em;
-        position: relative;
-        right: 1.5em;
-      }
-      h2 {
-        font-family: $primary-font;
-        position: relative;
-        right: 1.5em;
-        color: #333;
-        font-size: 18px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-      }
-    }
-    .nav-ul {
-      li.nav-list {
-        list-style: none;
-        color: #333;
-        font-size: 15px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: normal;
-        margin: 0.6em 0;
-        a {
-          text-decoration: none;
-          color: #333;
-        }
-        a::selection {
-          color: #007bff;
-        }
-        a.active {
-          color: #007bff;
-        }
-        .nav-hide {
-          display: none;
-        }
-        .nav-show {
-          display: block;
-        }
-        .sub-nav {
-          margin-left: 1em;
-          li.nav-list {
-            list-style: none;
-            color: #333;
-            font-size: 15px;
-            font-style: normal;
-            font-weight: 500;
-            line-height: normal;
-            margin: 0.6em 0;
-            a.heading {
-              font-family: $primary-font;
-              font-size: 16px;
-              font-style: normal;
-              font-weight: 600;
-              line-height: normal;
-            }
-            a.active {
-              color: #007bff;
-            }
-          }
-        }
-      }
-      li.heading {
-        font-family: $primary-font;
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: normal;
-        a.active {
-          color: #007bff;
-        }
-      }
-    }
-  }
-  .container-main {
-    background-color: $background-color_light;
-    box-shadow: $box-shadow;
-    border-radius: 5px;
-    width: 100%;
-    overflow: hidden;
-    contain: layout;
-    text-size-adjust: 100%;
-    text-rendering: optimizespeed !important;
-    -webkit-font-smoothing: antialiased;
-    .container-main__content {
-      padding: 2em;
-      .heading-primary {
-        color: #333;
-        font-family: $primary-font;
-        font-size: 25px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-        text-align: center;
-        text-transform: uppercase;
-        margin-bottom: 0.5em;
-      }
-      .paragraph {
-        color: #333;
-        text-align: justify;
-        font-family: Open Sans;
-        font-size: 15px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-        ol,
-        li {
-          margin-left: 1em;
-        }
-      }
-      .adoption-d {
-        margin-top: 1.3em;
-      }
-      .article-container {
-        .heading-secondary {
-          color: #333;
-          text-align: justify;
-          font-family: Open Sans;
-          font-size: 17px;
-          font-style: normal;
-          font-weight: 700;
-          line-height: normal;
-          margin: 0.5em;
-          .copy-link {
-            background: none;
-            border: 0;
-            margin: 0 0.8em;
-          }
-        }
-      }
-      .section-container {
-        margin-left: 2em;
-      }
-    }
-  }
 }
-// media queries
+main .vertical-nav {
+  background-color: #f5f5f5;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.18);
+  border-radius: 5px;
+  margin-right: 2em;
+  padding: 2em;
+  min-width: 180px;
+  height: calc(100vh - 0px);
+  top: 0;
+  position: sticky;
+}
+main .vertical-nav .nav-content {
+  display: flex;
+  align-items: center;
+}
+main .vertical-nav .nav-content img {
+  width: 5em;
+  height: 4.2em;
+  position: relative;
+  right: 1.5em;
+}
+main .vertical-nav .nav-content h2 {
+  font-family: "montserrat";
+  position: relative;
+  right: 1.5em;
+  color: #333;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+main .vertical-nav .nav-ul li.nav-list {
+  list-style: none;
+  color: #333;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  margin: 0.6em 0;
+}
+main .vertical-nav .nav-ul li.nav-list a {
+  text-decoration: none;
+  color: #333;
+}
+main .vertical-nav .nav-ul li.nav-list a::-moz-selection {
+  color: #007bff;
+}
+main .vertical-nav .nav-ul li.nav-list a::selection {
+  color: #007bff;
+}
+main .vertical-nav .nav-ul li.nav-list a.active {
+  color: #007bff;
+}
+main .vertical-nav .nav-ul li.nav-list .nav-hide {
+  display: none;
+}
+main .vertical-nav .nav-ul li.nav-list .nav-show {
+  display: block;
+}
+main .vertical-nav .nav-ul li.nav-list .sub-nav {
+  margin-left: 1em;
+}
+main .vertical-nav .nav-ul li.nav-list .sub-nav li.nav-list {
+  list-style: none;
+  color: #333;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  margin: 0.6em 0;
+}
+main .vertical-nav .nav-ul li.nav-list .sub-nav li.nav-list a.heading {
+  font-family: "montserrat";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+main .vertical-nav .nav-ul li.nav-list .sub-nav li.nav-list a.active {
+  color: #007bff;
+}
+main .vertical-nav .nav-ul li.heading {
+  font-family: "montserrat";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+main .vertical-nav .nav-ul li.heading a.active {
+  color: #007bff;
+}
+main .container-main {
+  background-color: #f5f5f5;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.18);
+  border-radius: 5px;
+  width: 100%;
+  overflow: hidden;
+  contain: layout;
+  -webkit-text-size-adjust: 100%;
+     -moz-text-size-adjust: 100%;
+          text-size-adjust: 100%;
+  text-rendering: optimizespeed !important;
+  -webkit-font-smoothing: antialiased;
+}
+main .container-main .container-main__content {
+  padding: 2em;
+}
+main .container-main .container-main__content .heading-primary {
+  color: #333;
+  font-family: "montserrat";
+  font-size: 25px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  text-align: center;
+  text-transform: uppercase;
+  margin-bottom: 0.5em;
+}
+main .container-main .container-main__content .paragraph {
+  color: #333;
+  text-align: justify;
+  font-family: Open Sans;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+main .container-main .container-main__content .paragraph ol,
+main .container-main .container-main__content .paragraph li {
+  margin-left: 1em;
+}
+main .container-main .container-main__content .adoption-d {
+  margin-top: 1.3em;
+}
+main .container-main .container-main__content .article-container .heading-secondary {
+  color: #333;
+  text-align: justify;
+  font-family: Open Sans;
+  font-size: 17px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  margin: 0.5em;
+}
+main .container-main .container-main__content .article-container .heading-secondary .copy-link {
+  background: none;
+  border: 0;
+  margin: 0 0.8em;
+}
+main .container-main .container-main__content .section-container {
+  margin-left: 2em;
+}
+
 @media (max-width: 768px) {
   .vertical-nav {
     display: none;
@@ -309,8 +303,6 @@ main {
     margin: 2.3em 0;
   }
 }
-
-
 #backToTop {
   display: none;
   position: fixed;
@@ -325,8 +317,7 @@ main {
   padding: 15px;
   border-radius: 10px;
   font-size: 18px;
-
-  &:hover {
-    background-color: #555;
-  }
-}
\ No newline at end of file
+}
+#backToTop:hover {
+  background-color: #555;
+}/*# sourceMappingURL=style.css.map */
diff --git a/js/opencodelaw.js b/js/opencodelaw.js
index 496f960..a470fac 100644
--- a/js/opencodelaw.js
+++ b/js/opencodelaw.js
@@ -175,7 +175,7 @@ fetch(src)
 
 
       if (themeToggle.querySelector('input').checked) {
-        slider.style.backgroundColor = '#533566'
+        slider.style.backgroundColor = '#555'
         nav.style.backgroundColor = `${darkBackgroundColor}`
         vertical_nav.style.backgroundColor = `${darkBackgroundColor}`
         container_main.style.backgroundColor = `${darkBackgroundColor}`
@@ -188,7 +188,7 @@ fetch(src)
         themeText.style.color = `${darkTextColor}`
         localStorage.setItem('theme', 'dark')
       } else {
-        slider.style.backgroundColor = 'yellow'
+        slider.style.backgroundColor = 'rgb(255, 255, 198)'
         nav.style.backgroundColor = '#f5f5f5'
         vertical_nav.style.backgroundColor = `${lightBackgroundColor}`
         container_main.style.backgroundColor = `${lightBackgroundColor}`