/* ——— SMOOTH SCROLL ——— */
html {
  scroll-behavior: smooth;
}

/* ——— VARIABLES ——— */
:root {
  --sidebar-bg:    #111111;
  --gradient-from: rgba(17,17,17, 1);
  --gradient-to:   rgba(0,15,40, 0.9);
  --highlight:     #4FB1E3;
}

/* ——— RESET & BASE ——— */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', sans-serif;
  background: #000;
  color: #fff;
}

/* ——— SIDEBAR ——— */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 200px;
  background: var(--sidebar-bg);
  padding: 2rem 1rem;
}
.sidebar h2 { margin-bottom: 2rem; }
.sidebar nav a {
  display: block; margin: 1rem 0;
  color: #ccc; text-decoration: none;
  transition: color .3s;
}
.sidebar nav a:hover,
.sidebar nav a.active {
  color: var(--highlight);
}

/* ——— PANELS ——— */
.panel {
  margin-left: 200px;
  min-height: 100vh;
  position: relative;
  display: flex; align-items: center; justify-content: center;

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

/* per-panel images */
#home     { background-image: url('../leaves.jpg'); }
#timeline { background-image: url('../space.jpg'); }
#resume   { background-image: url('../leaves.jpg'); }
#projects { background-image: url('../space.jpg'); }
#contact  { background-image: url('../leaves.jpg'); }

/* ——— HEADER BAR ——— */
.panel-header {
  position: absolute; top: 0; left: 0; width: 100%;
  background: linear-gradient(
    to bottom,
    var(--gradient-from),
    var(--gradient-to)
  );
  padding: 1.5rem 2rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.panel-header h1 { font-size: 2rem; margin-bottom: .25rem; }
.panel-header p  { font-size: 1rem; margin-bottom: .75rem; }

/* ——— BUTTONS ——— */
.btn {
  padding: .5rem 1rem;
  background: var(--highlight);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-size: .95rem;
  transition: background .2s;
}
.btn:hover { background: #3a8db8; }