/* 1. Basics */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'Press Start 2P', monospace; }
body { background: url('pixel-pattern.jpg') center/cover fixed; }

/* 2. Site wrapper: 3 columns */
.site-wrapper { display: flex; height: 100vh; }

/* 3. Sidebars */
.sidebar-left, .sidebar-right {
  width: 200px; padding: 1rem;
  background: rgba(255,255,255,0.9);
}
.sidebar-left .logo { display: block; max-width: 100%; margin-bottom: 1rem; }
.sidebar-left ul, .sidebar-right ul { list-style: none; }
.sidebar-left a, .sidebar-right a { text-decoration: none; display: block; margin: 0.5rem 0; color: #000; }

/* 4. Main content area */
.content-area {
  flex: 1; overflow-y: auto;
  background: #fff; padding: 2rem;
}

/* 5. Hamburger button (mobile) */
#hamburger {
  display: none; position: fixed;
  top: 1rem; left: 1rem;
  background: rgba(255,255,255,0.8); border: none;
  font-size: 1.5rem; cursor: pointer; z-index: 10;
}

/* 6. Responsive: screens under 700px */
@media (max-width: 700px) {
  .sidebar-left { position: fixed; left: -220px; top: 0; bottom: 0; transition: left 0.3s; }
  .sidebar-left.open { left: 0; }
  #hamburger { display: block; }
  .site-wrapper { margin-left: 0; }
  .sidebar-right { display: none; }
}