:root {
   /* Light mode colors */
   --zbts-bg-light: #f4f4f4;
   /* light background */
   --zbts-text-light: #333;
   /* dark text */
   --zbts-accent-light: #c7e000;
   /* vibrant yellow-green from logo */
   --zbts-accent-alt-light: #9d4dff;
   --zbts-btn-hover-light: #00c9e0;
   --zbts-section-bg-light: #ffffff;
   /* white for sections */
   --zbts-footer-bg-light: #f4f4f4;
   /* light footer background */
   --zbts-link-hover-light: #d0a4ff;
   --zbts-header-bg-light: rgba(10, 15, 26, 0.8);

   /* Dark mode colors */
   --zbts-bg-dark: #0a0f1a;
   /* dark background */
   --zbts-text-dark: #f4f4f4;
   /* light text */
   --zbts-accent-dark: #00f0ff;
   /* bright blue accent */
   --zbts-accent-alt-dark: #9d4dff;
   --zbts-btn-hover-dark: #00c9e0;
   --zbts-section-bg-dark: #11162a;
   /* dark section background */
   --zbts-link-hover-dark: #d0a4ff;
   --zbts-header-bg-dark: rgba(10, 15, 26, 0.8);
}

/* Base Styles */
body {
   margin: 0;
   font-family: 'Segoe UI', 'Roboto', sans-serif;
   background-color: var(--zbts-bg-light);
   color: var(--zbts-text-light);
   line-height: 1.6;
   font-size: 1rem;
}

header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: var(--zbts-header-bg-light);
   padding: 1rem 2rem;
   border-bottom: 1px solid var(--zbts-accent-alt-light);
   backdrop-filter: blur(6px);
}

header img {
   height: 40px;
}

nav a {
   margin-left: 1rem;
   color: var(--zbts-accent-light);
   text-decoration: none;
   font-weight: 500;
   transition: color 0.3s ease;
}

nav a:hover {
   color: var(--zbts-link-hover-light);
}

main {
   padding: 2rem;
   max-width: 800px;
   margin: 0 auto;
}

h1,
h2,
h3,
h4 {
   color: var(--zbts-accent-light);
}

/* You can also fine-tune individual heading levels if needed */
h1 {
   font-size: 2rem;
   /* Smaller size for h1 */
}

a {
   color: var(--zbts-accent-light);
   text-decoration: none;
}

a:hover {
   color: var(--zbts-link-hover-light);
}

section {
   background-color: var(--zbts-section-bg-light);
   border-radius: 0.5rem;
   padding: 2rem;
   margin: 2rem 0;
   box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);
}

button,
.button {
   background-color: var(--zbts-accent-light);
   color: var(--zbts-bg-light);
   border: none;
   padding: 0.75rem 1.5rem;
   font-size: 1rem;
   border-radius: 0.375rem;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

button:hover,
.button:hover {
   background-color: var(--zbts-btn-hover-light);
}

footer {
   text-align: center;
   padding: 2rem 1rem;
   color: #aaa;
   font-size: 0.875rem;
}

footer a {
   color: var(--zbts-accent-light);
   text-decoration: none;
}

footer a:hover {
   color: var(--zbts-link-hover-light);
}

footer p {
   margin: 0;
}

footer small {
   display: block;
   margin-top: 0.5rem;
   color: #888;
}

footer .social-icons {
   margin-top: 1rem;
}

footer .social-icons a {
   margin: 0 0.5rem;
   color: var(--zbts-accent-light);
   font-size: 1.5rem;
   transition: color 0.3s ease;
}

footer .social-icons a:hover {
   color: var(--zbts-link-hover-light);
}

footer .social-icons i {
   margin: 0 0.5rem;
}

footer .social-icons i:hover {
   color: var(--zbts-link-hover-light);
}

footer .social-icons i:active {
   transform: scale(0.9);
}

footer .social-icons i:focus {
   outline: none;
   box-shadow: 0 0 0 2px var(--zbts-accent-light);
}

footer .social-icons i:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px var(--zbts-accent-light);
}

footer .social-icons i:focus-within {
   outline: none;
   box-shadow: 0 0 0 2px var(--zbts-accent-light);
}

.site-header {
   background-color: var(--zbts-header-bg-light);
   padding: 1rem 2rem;
   border-bottom: 1px solid var(--zbts-accent-alt-light);
   backdrop-filter: blur(6px);
   position: sticky;
   top: 0;
   z-index: 100;
   height: 80px;
}

.header-container {
   display: flex;
   align-items: stretch;
   justify-content: space-between;
   max-width: 1200px;
   margin: 0 auto;
   width: 100%;
}

.logo-container {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   height: 100%;
   padding-right: 1rem;
}

.logo {
   height: 96px;
   transition: transform 0.3s ease;
}

.logo:hover {
   transform: scale(1.05);
}

.nav-list {
   list-style: none;
   display: flex;
   gap: 1.5rem;
   padding: 0;
   margin: 0;
   align-items: center;
   justify-content: flex-end;
   flex-grow: 1;
   height: 100%;
   transition: max-height 0.3s ease;
   overflow: hidden;
   max-height: 80px;
   flex-wrap: wrap;
}

.nav-list li a {
   color: var(--zbts-accent-light);
   text-decoration: none;
   font-weight: 500;
   transition: color 0.3s ease;
}

.nav-list li a:hover {
   color: var(--zbts-link-hover-light);
}

.menu-toggle {
   display: none;
   flex-direction: column;
   justify-content: space-between;
   width: 28px;
   height: 22px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
}

.menu-toggle .bar {
   height: 3px;
   width: 100%;
   background-color: var(--zbts-accent-light);
   border-radius: 2px;
   transition: 0.3s ease;
}

/* Base Toast Styles */
.toast {
   background-color: #333;
   color: #fff;
   padding: 10px 20px;
   border-radius: 5px;
   display: none;
   /* Hidden by default */
   margin: 1rem 0;
   /* Space between toast and other content */
   position: relative;
   /* Position relative to the page content */
}

/* Show the toast */
.toast.show {
   display: block;
   margin-top: 20px;
   /* Adjust margin if needed to create space between toast and page content */
}

/* Close button */
.toast .close-btn {
   background: transparent;
   border: none;
   color: #fff;
   font-size: 20px;
   cursor: pointer;
   position: absolute;
   top: 5px;
   right: 10px;
}

/* Footnote Styling */
.footnotes {
   font-size: 0.875rem;
   /* Smaller text for footnotes */
   background-color: var(--zbts-footer-bg-light);
   color: var(--zbts-text-light);
   /* Text color (default light mode) */
   line-height: 1.5;
   margin-top: 1rem;
   margin-bottom: 1rem;
}

.footnotes a {
   color: var(--zbts-accent-light);
   /* Link color for footnotes */
   text-decoration: none;
   font-weight: bold;
}

.footnotes a:hover {
   color: var(--zbts-link-hover-light);
   /* Hover effect on footnote links */
}

.footnotes mark {
   background-color: var(--zbts-accent-light);
   /* Background for highlighted footnote parts */
   color: var(--zbts-bg-light);
}

/* Responsive layout */
@media (max-width: 768px) {
   .menu-toggle {
      display: flex;
   }

   .main-nav {
      position: absolute;
      top: 70px;
      right: 0;
      background-color: var(--zbts-section-bg-light);
      width: 100%;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      z-index: 99;
   }

   .main-nav.nav-open {
      max-height: 200px;
   }

   .nav-list {
      flex-direction: column;
      align-items: flex-start;
      padding: 1rem;
      gap: 1rem;
   }

   section {
      background-color: var(--zbts-section-bg-dark);
   }

   .footnotes {
      font-size: 0.75rem;
      /* Smaller font on mobile */
      background-color: var(--zbts-footnotes-bg-light);
      padding: 0.3rem;
   }

   .footnotes a {
      font-size: 0.875rem;
   }
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
   body {
      background-color: var(--zbts-bg-dark);
      color: var(--zbts-text-dark);
   }

   header {
      background-color: var(--zbts-header-bg-dark);
   }

   .main-nav {
      background-color: var(--zbts-bg-dark);
   }

   nav a {
      color: var(--zbts-accent-dark);
   }

   nav a:hover {
      color: var(--zbts-link-hover-dark);
   }

   button,
   .button {
      background-color: var(--zbts-accent-dark);
      color: var(--zbts-bg-dark);
   }

   button:hover,
   .button:hover {
      background-color: var(--zbts-btn-hover-dark);
   }

   footer {
      color: #aaa;
   }

   footer a {
      color: var(--zbts-accent-dark);
   }

   footer a:hover {
      color: var(--zbts-link-hover-dark);
   }

   .footnotes {
      background-color: var(--zbts-bg-dark);
      /* Dark background for footnotes */
      color: var(--zbts-text-dark);
      /* Text color in dark mode */
      padding: 0.5rem;
      border-radius: 5px;
   }

   .footnotes a {
      color: var(--zbts-accent-dark);
      /* Dark mode accent color */
   }

   .footnotes a:hover {
      color: var(--zbts-link-hover-dark);
      /* Hover color in dark mode */
   }

   .footnotes mark {
      background-color: var(--zbts-accent-dark);
      /* Dark mode background for highlights */
      color: var(--zbts-text-dark);
   }

}