* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f7f5f0;
  color: #222;
  line-height: 1.6;
}
/* Page content sits in its own centered column below the full-width menu
   bar (see site.css .site-menu) - keeping max-width/padding off of body
   itself is what lets the menu bar span the whole page, at the same size
   and position as every other page, regardless of each page's own content
   width. */
.page-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}
h1.title {
  text-align: center;
  font-size: 2rem;
  margin: 1.5rem 0 2rem;
  letter-spacing: 0.05em;
  font-family: Arial, Helvetica, sans-serif;
}
.chapter-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  white-space: normal;
}
.chapter-links a.chapter-btn {
  display: inline-block;
  background-color: #2c5f8a;
  color: #ffffff;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: 0.65rem 1rem;
  border-radius: 6px;
  min-width: 2.75rem;
  text-align: center;
  transition: background-color 0.2s ease;
}
.chapter-links a.chapter-btn:hover,
.chapter-links a.chapter-btn:focus {
  background-color: #1e4160;
}

@media (max-width: 600px) {
  .page-content {
	padding: 1rem 0.75rem 2rem;
	font-size: 1rem;
  }
  h1.title {
	font-size: 1.5rem;
	margin: 1rem 0 1.5rem;
  }
  .chapter-links {
	gap: 0.5rem;
  }
  .chapter-links a.chapter-btn {
	padding: 0.55rem 0.85rem;
	font-size: 0.95rem;
  }
}