:root {
  --bg: #f5f5f5;     /* light grey background */
  --text: #222222;   /* dark grey text */
  --accent: #0066cc; /* link color */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  font-size: 18px;
  text-align: center;  /* center all text by default */
}

/* Centered content container */
.container {
  max-width: 60ch;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Headings */
h1, h2, h3 {
  margin: 1.2rem 0 0.6rem 0;
  font-weight: 600;
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

/* Paragraphs */
p {
  margin: 0 0 1rem 0;
}

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

a:hover {
  text-decoration: underline;
}


pre {
  display: block;
  margin: 1.5rem auto;
  max-width: 500px;   /* cap at 500px, same as image */
  width: 100%;        /* scales on small screens */
  padding: 1rem;
  background: #1e1e1e;
  color: #f5f5f5;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  font-size: 0.9rem;
  overflow-x: auto;   /* scroll if code is wider */
  text-align: left;   /* keep code aligned left */
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
}


/* Images centered and scaled down for blog posts */
img {
  display: block;
  margin: 1.5rem auto;
  max-width: 500px;  /* cap at 500px */
  width: 100%;       /* still scales down on smaller screens */
  height: auto;
  border-radius: 8px;
}

/* Optional: subtle footer */
footer {
  margin-top: 3rem;
  font-size: 0.9rem;
  color: #555;
}