:root{
  --sidebar-w: 240px;
  --slide-time: 300ms;
  --easing: cubic-bezier(.22,.61,.36,1);
}

.sidebar {
  position: fixed;
  top: 2.5rem;
  left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - 4rem);
  padding: 1rem;
  background: rgba(255, 255, 255, 0); /* white, but 80% opacity */
  transform: translateX(-100%);
  transition: transform var(--slide-time) var(--easing);
  z-index: 15;
  overflow-y: auto;
}

.sidebar h1 {
  margin-top: 0.12rem; /* adjust until it visually matches 2025 */
}

/* Slide it in */
body.sidebar-open .sidebar{
  transform: translateX(0);
}

/* Push the page over when open */
.content-wrap{
  transition: margin-left var(--slide-time) var(--easing);
}
body.sidebar-open .content-wrap{
  margin-left: var(--sidebar-w);
}

/* Menu links (yours already) */
#menu a{
  display:block;
  color:black;
  padding:.25rem 0;
  text-decoration:none;
}

/* Toggle button (top-left, above content) */
.sidebar-toggle{
  position: fixed;
  top: 0.5rem; 
  left: 0.5rem;
  z-index: 40;
  background: #fff;
  border: none;
  padding: .3rem .4rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Optional overlay for small screens */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--slide-time) var(--easing);
  z-index: 20;
}
body.sidebar-open .overlay{
  opacity: 1;
  pointer-events: auto;
}

/* Reduce motion for folks who prefer it */
@media (prefers-reduced-motion: reduce){
  .sidebar, .content-wrap, .overlay{ transition: none !important; }
}

/* Mobile: don't push content, just overlay */
@media (max-width: 720px){
  body.sidebar-open .content-wrap{ margin-left: 0; } /* overlay mode */
}