nav {
     margin: 0;
     padding: 0;
     width: 100%;
     min-height: fit-content;
     background-color: var(--primary-color);
     z-index: 5;
     position: fixed;
     top: 0;
     width: 100%;
     transition: top 0.3s;
 }

 a {
     cursor: pointer;
 }

 .nav-container {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 1.5rem;
     background-color: var(--primary-color);
 }

 .nav-left-container {
     display: flex;
     position: relative;
     align-items: center;
     padding: .5rem;
 }

 .nav-right-container {
     width: 100%;
     padding: 10px;
     text-align: left;
     /* for left container */
 }

 .logo {
     height: 2.5rem;
 }

 .nav-right-container ul {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 1rem;
 }

 .nav-right-container li {
     list-style: none;
     font-size: 0.85rem;
     padding: 0.5rem 1rem;
     cursor: pointer;
     transition: all 0.7s ease;
     border: 0.5px solid transparent;
     border-radius: 10px;
 }

 .nav-right-container li button {
     cursor: pointer;
 }

 .nav-right-container li:hover {
     /* border: 0.5px solid #454545; */
     background: #454545;
 }

 .hamburger {
     display: none;
     cursor: pointer;
     flex-direction: column;
     justify-content: space-around;
     width: 2rem;
     height: 1.5rem;
     margin-right: 10px;
 }

 .hamburger span {
     display: block;
     width: 100%;
     height: .25rem;
     background: white;
     border-radius: 10px;
 }

 ul button {
     border: none;
     background: transparent;
     color: var(--neutral-color);
 }

 .cta-button {
     background-color: var(--accent-color);
     color: var(--neutral-color);
     border: none;
     padding: 10px 20px;
     font-size: 18px;
     border-radius: 1rem;
     cursor: pointer;
     transition: box-shadow 0.3s ease;
     width: max-content;
 }

 .cta-button:hover {
     box-shadow: 0 0 10px var(--accent-color);
 }

 .dark-mode {
     background-color: #333;
     color: #c4c2c2;
 }

 .dark-mode article {
     background-color: #424242;
 }

 .dark-mode h1,
 .dark-mode h2 {
     color: #5999d8;
 }

 .toggle-button {
     position: fixed;
     top: 10px;
     right: 10px;
     padding: 10px;
     border: none;
     border-radius: 5px;
     color: #8c8c8c;
     cursor: pointer;
 }

 .toggle-button:hover {
     /* border: 0.5px solid #454545; */
     background: #454545;
 }


 @media (max-width: 768px) {
     nav {
         height: 3rem;
     }

     .nav-container {
         flex-direction: column;
         font-size: 1.5rem;
     }

     .nav-right-container {
         /* width: 100%; */
         text-align: center;
     }

     .nav-left-container {
         width: 90%;
         justify-content: center;
         align-items: flex-end;
     }

     .nav-right-container ul {
         flex-direction: column;
     }

     .nav-right-container li {
         font-size: 1rem;
         padding: 0.5rem;
     }

     .logo {
         height: 2rem;
         width: 100%;
     }

     .hamburger {
         display: flex;
         position: absolute;
         top: .5rem;
         left: .5rem;
     }

     .nav-right-container ul {
         display: none;
         flex-direction: column;
         width: 100%;
     }

     .nav-right-container li {
         text-align: center;
     }

     .nav-right-container ul.active {
         display: flex;
     }
 }