#navBtn {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1000;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: white;
}

#navDrawer {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background: #111;
  z-index: 999;
  transition: left 0.3s ease;
  padding-top: 60px;
  box-shadow: 2px 0 8px rgba(255,255,255,0.1);
  color: white;
}

#navDrawer.open {
  left: 0;
}

#navDrawer a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
  color: white;
  border-bottom: 1px solid #333;
}

#navDrawer a:hover {
  background: #222;
}

#navOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 998;
}

#navOverlay.open {
  display: block;
}



/* Light theme (white page) */
body.light {
  --nav-bg: #f5f5f5;
  --nav-text: #333;
  --nav-border: #ddd;
  --nav-hover: #e0e0e0;
  --overlay-bg: rgba(0,0,0,0.4);
}

/* Dark theme (black page) */
body.dark {
  --nav-bg: #111;
  --nav-text: white;
  --nav-border: #333;
  --nav-hover: #222;
  --overlay-bg: rgba(0,0,0,0.6);
}

#navDrawer {
  background: var(--nav-bg);
  color: var(--nav-text);
}

#navDrawer a {
  color: var(--nav-text);
  border-bottom: 1px solid var(--nav-border);
}

#navDrawer a:hover {
  background: var(--nav-hover);
}

#navBtn {
  color: var(--nav-text);
}