body {
    margin: 0;
    padding: 0;
    background-color: black; /* Ensures background is black */
    text-align: center; /* Helps center inline elements */
}

.content-container {
    width: 90%; /* Matches the navbar width */
    max-width: 1170px; /* Prevents it from getting too wide */
    min-height: 300px; /* Ensures a minimum height */
    margin: 20px auto; /* Centers the container */
    background-color: #ffe5cc; /* Light orange/peach */
    border: 3px solid #ff8c1a; /* Deep orange */
    border-radius: 10px; /* Slightly rounded edges */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
    padding: 20px; /* Space inside the container */
    display: flex;
    flex-direction: column; /* Stack chapter divs inside */
    gap: 15px; /* Space between chapter divs */
}

.page-title {
    color: #7d3108;
    border-bottom: 2px solid #7d3108;
}


.about-page {
  font-family: 'ChalkboardSE', 'Comic Sans MS', Arial, sans-serif;
  font-size: 28px; /* was 20px */
  line-height: 1.7;
  color: #333;
  padding: 20px;
}

.about-page h2,
.about-page h3 {
  font-size: 36px; /* was 28px */
  margin-top: 20px;
  color: #00008b;
}

.faq-section {
  font-family: 'ChalkboardSE', 'Comic Sans MS', Arial, sans-serif;
  font-size: 24px; /* was 18px */
  padding: 20px;
  max-width: 800px;
  margin: auto;
}

.faq-section h2 {
  font-size: 36px; /* was 28px */
  margin-bottom: 20px;
  color: #00008b;
}


.faq-section {
  font-family: 'ChalkboardSE', 'Comic Sans MS', Arial, sans-serif;
  font-size: 18px;
  padding: 20px;
  max-width: 800px;
  margin: auto;
}

.faq-section h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #00008b;
}

.faq-section details {
  margin-bottom: 15px;
  border: 1px solid #ccc;
  padding: 10px 15px;
  border-radius: 10px;
  background-color: #f0f8ff;
  transition: background-color 0.3s ease;
}

.faq-section details[open] {
  background-color: #e0f0ff;
}

.faq-section summary {
  cursor: pointer;
  font-weight: bold;
}

.faq-section summary:hover {
  text-decoration: underline;
}
