:root {
    /* Base colors */
    --color-light-bg: #f9f9f9;
    --color-light-text: #333;
    --color-dark-bg: #1e1e1e;
    --color-dark-text: #ddd;
  
    /* Palette colors */
    --c1: #93c8ee;
    --c2: #4d90d3;
    --c3: #21638f;
    --c4: #004e98;
    --c5: #102c9d;
    --c6: #000058;
  
    /* Accent colors */
    --accent-primary: var(--c3);
    --accent-hover: var(--c4);
    --accent-dark: var(--c5);
  }
  
  /* Base */
  body { 
    font-family: Arial, sans-serif; 
    margin: 0; 
    background: var(--color-light-bg); 
    color: var(--color-light-text); 
    scroll-behavior: smooth; 
    transition: background 0.3s, color 0.3s; 
  }
  body.dark { 
    background: var(--color-dark-bg); 
    color: var(--color-dark-text); 
  }
  
  /* Navbar */
  .navbar {
    position: fixed; top: 0; width: 100%; 
    display: flex; 
    align-items: center; 
    padding-top: 2vh;
    padding-bottom: 2vh;
    justify-content: center; 
    background: #fff;
    z-index: 1000; transition: background 0.3s, box-shadow 0.3s;
  }
  .navbar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px; /* thickness of the line */
    background: linear-gradient(90deg, var(--c1), var(--c3), var(--c4));
  }
  body.dark .navbar { 
    background: #2c2c2c; 
    border-color: var(--c5); 
  }
  .navbar.scrolled { 
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); 
  }
  
  /* Nav links */
  .nav-links { display: flex; justify-content: center; flex-wrap: wrap; z-index: 2000; }
  .navbar a.nav-link { 
    margin: 0 20px; text-decoration: none; 
    color: var(--color-light-text); font-weight: bold; 
    font-size: 1em; padding-bottom: 5px; 
    border-bottom: 3px solid transparent; transition: color 0.3s; 
  }
  .navbar a.nav-link.active { 
    color: var(--accent-primary); 
    border-bottom: 3px solid var(--c5); 
  }
  body.dark .navbar a.nav-link { color: var(--color-dark-text); }
  body.dark .navbar a.nav-link.active { 
    color: var(--accent-primary); 
    border-bottom: 3px solid var(--accent-primary); 
  }
  
  /* Hamburger */
  .nav-toggle { display: none; font-size: 3.5vh; cursor: pointer; position: fixed; top: 2vh; left: 3vh; z-index: 3000; color: var(--color-light-text); }
  
  /* Dark toggle */
  .dark-toggle { position: fixed; top: 2vh; right: 3vh; border: none; background: transparent; cursor: pointer; z-index: 4000; transition: transform 0.3s; }
  .dark-toggle svg { color: var(--accent-primary); transition: transform 0.5s, fill 0.5s; }
  body.dark .dark-toggle svg { transform: rotate(180deg); color: var(--accent-primary); }
  
  /* Section full-width background */
  section { 
    min-height: 60vh;
    width: 100%; padding: 160px 0; opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, background-color 0.3s; 
    scroll-margin-top: 70px; position: relative;
  }
  
  /* Wrapper for content */
  section .section-content {
    max-width: 800px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1;
  }
  
  /* Fade-in active class */
  section.visible { opacity: 1; transform: translateY(0); }
  
  /* Alternating full-width backgrounds */
  section:nth-of-type(odd) { background-color: var(--color-light-bg); }
  section:nth-of-type(even) { background-color: #ececec; }
  body.dark section:nth-of-type(odd) { background-color: var(--color-dark-bg); }
  body.dark section:nth-of-type(even) { background-color: #2c2c2c; }
  
  /* Header underlines */
  section h2 {
    border-bottom: 3px solid transparent; /* keep space for underline */
    padding-bottom: 8px;
    position: relative;
  }
  
  section h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;            /* aligns with border-bottom */
    width: 100%;          /* matches heading width */
    height: 3px;          /* same as border thickness */
    background: linear-gradient(90deg, var(--c3), var(--c4));
    border-radius: 2px;   /* optional rounded ends */
  }

  section::after {
    content: "";
    position: absolute;
    bottom: 0;           /* sticks to the bottom of the section */
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--c1), var(--c3), var(--c4));
  }
  
  /* Footer */
  footer { text-align: center; margin-top: 50px; padding: 20px; font-size: 0.9em; color: var(--c1); }

  /* Desktop */
  .navbar .nav-links {
      display: flex;
  }
  
  /* Media queries */
  @media (max-width: 768px) {

    .navbar { height: 0; padding: 0; background: transparent; box-shadow: none; }

    .nav-toggle {
      display: block;
      position: fixed;
      top: 0rem;
      left: 15px;
      z-index: 3000;
      cursor: pointer;
      color: var(--color-light-text);
    }
    body.dark .nav-toggle { color: var(--color-dark-text); }
  
    .nav-links {
      position: fixed;
      top: 0px; /* below navbar */
      left: -260px;
      width: 260px;
  
      /* Fix 1: allow menu to scroll */
      max-height: calc(100vh);
      height: 100vh;
      overflow-y: scroll;
      overflow-x: hidden;
  
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
  
      background: var(--color-light-bg);
      transition: left 0.3s ease;
      z-index: 2500;

      padding-top: 2rem;
    }
    .nav-links.show { left: 0; }
  
    body.dark .nav-links {
      background: var(--color-dark-bg);
    }
  
    .nav-links a {
      width: 100%;              /* full row width */
      display: block;
      padding-top: 2vh;
      padding-bottom: 2vh;
      font-size: 3vh;
      color: inherit;
      border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    body.dark .nav-links a {
      border-bottom-color: rgba(255,255,255,0.1);
    }
  
    /* Prevent layout being pushed sideways */
    .content.push {
      transform: none !important;
    }
  
    /* Ensure scroll anchor visibility */
  }
  
  
  
  
  /* Data category styling */
  .data-category { margin-bottom: 40px; }
  .data-category ul { list-style-type: disc; padding-left: 20px; }
  .data-category li { margin-bottom: 10px; }
  .data-category a.button { 
    color: var(--accent-primary); 
    font-weight: bold; text-decoration: none; 
    padding: 6px 12px; border-radius: 5px; transition: color 0.3s, background 0.3s; 
  }
  .data-category a.button:hover { color: var(--accent-hover); }
  
  /* Code repository section */
  .coderepo-container {
    max-width: 800px; margin: auto; padding: 40px 20px; 
    text-align: center; background-color: #f0f4f8; border-radius: 12px;
  }
  .coderepo-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    max-width: 900px; margin: auto; padding: 40px 20px; gap: 20px;
    background: linear-gradient(145deg, var(--c1), var(--c3)); color: white; border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  }
  body.dark .coderepo-row {
    background: linear-gradient(145deg, var(--c4), var(--c6));
  }
  body.dark .repo-info h3 { color: var(--c1); }
  body.dark .github-btn { color: var(--c1); }
  body.dark .github-btn:hover { color: var(--accent-hover); }
  
  /* Banner */
  #home {
    background-image: url('banner.png');
    background-size: cover;
    background-position: 10% center;
    background-repeat: no-repeat;
    color: white;
  }
  #home::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 0;
  }
  #home .section-content { position: relative; z-index: 1; }
  
  /* Highlighted text span */
  span.highlight {
    background: var(--c2); color: white; padding: 2px 4px; border-radius: 3px;
  }
  
  /* Text shadows for headers for extra depth */
  h1, h2, h3 { text-shadow: 1px 1px 3px rgba(33,99,143,0.4); }