/* Renplanet quick skin */

:root{
  --paper: #f6f1e6;
  --paper2:#efe6d6;
  --ink:  #1f1b16;
  --muted:#5a4d43;
  --accent:#0f5fa8;
  --accent2:#8a2c2c;
  --rule: rgba(31,27,22,.14);
}

/* Page background with subtle "paper" variation */
html, body {
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(138,44,44,.06), transparent 60%),
    radial-gradient(900px 600px at 80% 0%, rgba(15,95,168,.06), transparent 55%),
    linear-gradient(180deg, var(--paper), var(--paper2));
  color: var(--ink);
}

/* Typography: readable, not stark */
body {
  font-size: 18px;
  line-height: 1.65;
}

h1, h2, h3 {
  color: var(--ink);
  letter-spacing: .02em;
}

/* Links that feel like ink, not default blue */
a {
  color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--accent2); }

/* Header polish */
#header, .navbar {
  background: rgba(246,241,230,.86);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}

/* Pull the logo/title into the vibe */
.navbar-brand img,
.navbar-brand svg {
  height: 40px;
}

/* Make the main content feel like a “panel” */
#body-wrapper .container,
.section .container {
  max-width: 860px;
}

#body-wrapper {
  padding-top: 2.2rem;
}

#body-wrapper .content {
  background: rgba(255,255,255,.55);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 2.2rem 2.2rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

/* Slightly punchier first paragraph */
#body-wrapper .content > p:first-of-type {
  font-size: 1.05em;
  color: var(--muted);
}

/* A nice divider look */
hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2rem 0;
}