:root {
  --spacing: 0.25rem;
  --highlight-base: #4c4c4c;
}

/* -------------------------------------------------
   Global & layout
   ------------------------------------------------- */
body {
  color: #fff;
  background-color: oklch(21% 0.006 285.885);
  font-family: system-ui, sans-serif;
}
header { background-color: oklch(26.9% 0 0); }
footer { background-color: #2d2d2d; }

/* -------------------------------------------------
   Buttons & links
   ------------------------------------------------- */
button,
a { font-weight: bold; }

.nav-button {
  display: inline-block;
  padding-inline: calc(var(--spacing) * 2);
  font-size: 1rem;
  font-weight: 500;
  color: #ebebeb;
  background-color: var(--highlight-base);
  transition: background-color 0.2s;
}

/* Darkening steps – 20 % per button */
.nav-button:nth-child(1) { background-color: var(--highlight-base); }
.nav-button:nth-child(2) { background-color: color-mix(in srgb, var(--highlight-base), #000 20%); }
.nav-button:nth-child(3) { background-color: color-mix(in srgb, var(--highlight-base), #000 40%); }
.nav-button:nth-child(4) { background-color: color-mix(in srgb, var(--highlight-base), #000 60%); }

.nav-button:hover { filter: brightness(1.1); }

/* -------------------------------------------------
   Nav container – no gap between buttons
   ------------------------------------------------- */
nav { display: flex; }

/* -------------------------------------------------
   Status boxes
   ------------------------------------------------- */
.status-box {
  color: #a4a4a4;
}
.status-box:hover { overflow: clip; }

#discord::before   { content: 'Online'; color: #ccc; background-color: rgba(90,255,0,0.2); padding-inline: 10px; }
#spotify::before   { content: '|> Spotify'; }
#spotify:hover::before { content: '|> Spotify - just be competent - r u s s e l b u c k'; }
#steam::before     { content: '|> Steam'; }
#steam:hover::before   { content: '|> Steam - cult of the lamb - 12m 58s'; }

.status {
  color: #ebebeb;
  padding-inline: 4px;
}

/* -------------------------------------------------
   Utility helpers (Tailwind‑like)
   ------------------------------------------------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.gap-5 { gap: calc(var(--spacing) * 5); }
.gap-4 { gap: calc(var(--spacing) * 4); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- NAV BUTTONS – terminal‑style ---- */
.nav-button,
#discord {
  display: inline-flex;
  align-items: center;
}

/* Header baseline alignment */
header { align-items: baseline; }

/* Highlight element */
highlight {
  background-color: #4c4c4c;
}

/* -------------------------------------------------
   Responsive tweaks
   ------------------------------------------------- */
@media (max-width: 768px) {
  header,
  footer,
  .modal-content {
    flex-direction: column;
    align-items: stretch;
  }

  nav { flex-wrap: wrap; gap: var(--spacing); }

  .flex-wrap { flex-wrap: wrap; }

  .gap-5, .gap-4 { gap: calc(var(--spacing) * 2); }

  .modal-content { width: 90%; }
}

/* -------------------------------------------------
   Modal styling
   ------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal.hidden { display: none; }

.modal-content {
  background: oklch(26% 0 0);
  color: #fff;
  padding: 1rem;
  width: 400px;
  max-width: 95%;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #fff;
  background: rgb(255,0,0);
  padding-inline: 0.25rem;
  height: 1.5rem;
  width: 1.5rem;
  border: none;
  cursor: pointer;
}
.modal-close:after { font-size: 17px; content: 'X';}
.modal-close:hover { color: #bbb; }