:root {
  --bg: #123f55;
  --accent: #eac7a8;
  --text: #e8f7fb;
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noise)' opacity='0.32'/></svg>");
  background-repeat: repeat;
  background-size: 200px auto;
  opacity: .18;
  mix-blend-mode: multiply;
  filter: contrast(1.02) saturate(.95);
}

/* Markdown elements */

h1, h2, h3, h4, h5, h6 {
  margin-top: 1.4em;
  margin-bottom: 0.6em;
  font-weight: 600;
}

p, ul, ol {
  margin: 0.6em 0;
}

strong {
  font-weight: 700;
}

a {
  color: var(--accent);
  text-decoration: none;
  display: inline-block; /* keeps social links horizontal */
  margin-right: 0.35rem; /* slight spacing */
}

a:hover {
  opacity: 0.85;
}

code, .accent {
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
}

/* layout helpers for centered pages (optional) */
.centered-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start; /* no vertical centering */
  justify-content: center; /* still center horizontally */
  padding-top: 20vh; /* ≈ 30–40% from top */
  padding-bottom: 0;
  text-align: left;
}

.container {
  max-width: 700px;
  width: 90%;
}