/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* =========================================================
   CODEFILE THEME
   Bright text on dark background
   Clean, structured, code-like layout
========================================================= */

:root {
  --bg: #05070b;
  --fg: #e6edf3;
  --muted: #8b949e;

  --accent: #58a6ff;   /* links / symbols */
  --keyword: #ff7b72;  /* section headers */
  --string: #7ee787;   /* highlights */
  --comment: #6e7681;  /* comments */

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco,
          Consolas, "Liberation Mono", "Courier New", monospace;

  --wrap: 860px;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 32px 20px 80px;
}

/* ---------- Links ---------- */
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ---------- Header ---------- */
.site-header {
  margin-bottom: 32px;
}

.brand-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.brand-title a {
  color: var(--fg);
}

.brand-subtitle {
  margin: 6px 0 0;
  color: var(--comment);
}

/* ---------- Navigation (looks like symbols) ---------- */
.nav {
  margin-top: 18px;
}

.nav a {
  margin-right: 18px;
  color: var(--accent);
}

.nav a::before {
  content: "→ ";
  color: var(--comment);
}

/* ---------- Sections as code blocks ---------- */
.section {
  margin-top: 36px;
}

.section-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--keyword);
  margin-top: 4px;
  margin-bottom: 6px;
}

/* ---------- Code-line content ---------- */
.block {
  margin-left: 16px;
  margin-top: 4px;
}

.line {
  display: block;
  white-space: pre-wrap;
  line-height: 1.35;      /* ↓ tighter than default */
  margin: 1px 0;         /* ↓ very small vertical gap */
}

/* ---------- Comment style ---------- */
.comment {
  color: var(--comment);
}

/* ---------- Highlighted values ---------- */
.value {
  color: var(--string);
}

/* ---------- Lists ---------- */
.list {
  margin: 6px 0 0 16px;
}

.list li {
  list-style: none;
  margin: 4px 0;
}

.list li::before {
  content: "- ";
  color: var(--comment);
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 64px;
  color: var(--comment);
  font-size: 13px;
}

/* ---------- Selection ---------- */
::selection {
  background: rgba(88,166,255,0.25);
}