:root {
  --snout-blue: #2b4564;
  --snout-blue-light: #7299ac;
  --snout-blue-dark: #223748;
}

body {
  font-family: "Times New Roman", Times, serif;
  background-color: #f8f9fa;
}

.big-text {
  font-size: 20px;
}

.navbar {
  background-color: var(--snout-blue);
}

.navbar-brand {
  font-size: 1.75rem;
  font-weight: bold;
  font-style: italic;
  color: white !important;
  letter-spacing: 1px;
}

.navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.8);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: #ffffff !important;
  font-weight: bold;
}

h1.page-title {
  font-size: 2.75rem;
  font-style: italic;
  color: var(--snout-blue);
  text-align: center;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 2px rgba(34, 55, 72, 0.15);
}

.card {
  background-color: #f8f9fa; /* Matches page background */
  border: none; /* Removes the border */
  box-shadow: none; /* Optional: removes subtle shadow */
}

.card.shadow-sm {
  box-shadow: none !important;
}

.card-img-top {
  width: 75%;
  height: auto;
  margin: 0 auto;
  display: block;
}

.card a.text-dark:hover {
  color: var(--snout-blue-dark) !important;
}

footer {
  background-color: var(--snout-blue);
  color: white;
  padding: 1rem 0;
}

footer a {
  color: #ffffff;
  text-decoration: underline;
}

#chapter-nav a {
  font-size: 1.5rem !important; /* Increase as needed */
  font-weight: bold;
}

.card-img-top {
  aspect-ratio: 2 / 3; /* Adjust as needed */
  object-fit: cover;
  width: 90%;
}

.custom-banner {
  background-color: var(--snout-blue-light);
  font-size: 1.5rem;
  border-radius: 0;
  font-weight: 500;
  color: #fff; /* white text for readability */
}

/* Custom button using main site blue */
.btn-snoutblue {
  background-color: var(--snout-blue);
  border-color: var(--snout-blue);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
}

.btn-snoutblue:hover {
  background-color: var(--snout-blue-dark);
  border-color: var(--snout-blue-dark);
  color: #fff;
}