@font-face {
  font-family: 'Maple Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/maple-mono@latest/latin-400-normal.woff2) format('woff2'),
       url(https://cdn.jsdelivr.net/fontsource/fonts/maple-mono@latest/latin-400-normal.woff) format('woff');
}

/* Blog title styling */
.blog-title {
  font-family: 'Maple Mono', monospace;
  font-weight: 400;
}

/* Base layout */
body {
  font-family: sans-serif;
  max-width: 1500px;
  margin: 0 auto;
  padding: 1rem 2rem;
  line-height: 1.6;
  background: #2b2b2b;      /* dark gray background */
  color: #e0e0e0;           /* light gray text for contrast */
}

/* Links */
a {
  color: #80bfff;           /* soft blue links */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Header & Footer */
header, footer {
  margin-bottom: 2rem;
  text-align: center;
}

header a, footer a {
  color: #e0e0e0;
}

/* Navigation */
nav a {
  margin: 0 0.5rem;
  font-weight: bold;
}

/* Headings */
h1, h2, h3 {
  color: #ffffff;           /* slightly brighter for headings */
}

/* Post list */
ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 0.5rem;
}

/* Article content */
article p {
  margin-bottom: 1rem;
}

article h1 {
  margin-top: 0;
}

/* Optional subtle borders */
article, ul li {
  border-bottom: 1px solid #444; 
  padding-bottom: 0.5rem;
}

/* Footer text */
footer p {
  font-size: 0.9rem;
  color: #aaaaaa;
}

/* --- Three Column Layout --- */
.three-column-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem; /* space between columns */
  margin-top: 2rem;
}

.column h2 {
  margin-top: 0;
  font-size: 1.4rem;
  border-bottom: 1px solid #444;
  padding-bottom: 0.5rem;
}

.column ul {
  list-style: none;
  padding: 0;
}

.column li {
  margin-bottom: 0.5rem;
}

/* --- Mobile: Stack columns vertically --- */
@media (max-width: 768px) {
  .three-column-layout {
    grid-template-columns: 1fr; /* one column */
    gap: 1.5rem; /* space between stacked rows */
  }
}