/* Base Styles */
body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  color: #333;
}

h1, h2 {
  font-family: 'Georgia', serif;
  margin-bottom: 0.5em;
}

p {
  margin-bottom: 1em;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* General Styles for Full-Width Sections */
.header, .toc, .blog-content, .footer {
  width: 100%; /* Ensure sections span across the page */
  margin: 0; /* Remove margin to avoid boxed appearance */
  padding: 20px 0; /* Add vertical spacing */
}

/* Footer */
.header {
  text-align: center;
  padding: 10px 0;
  background-color: #FFEFDB; /* Slightly lighter header background */
  color: #333;
  font-size: 0.9em;
}

.blog-content {
  background-color: #fff; /* Optional: Keep the content section white */
  padding: 20px; /* Add some vertical padding for readability */
}

.toc {
  background-color: #FBCEB1; /* TOC background spanning the page */
  padding: 10px 0; /* Vertical padding */
}

/* TOC Buttons */
.toc ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: space-around; /* Spread buttons across the page */
  margin: 0; /* Remove default margin */
}

.toc ul li {
  margin: 0;
}

.toc-link {
  text-decoration: none;
  color: #000; /* Black text by default */
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: transparent; /* No background by default */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
}

.toc-link:hover {
  background-color: #fff; /* White background on hover */
  color: #000; /* Black text on hover */
}

/* Footer */
.footer {
  text-align: center;
  padding: 10px 0;
  background-color: #FFEFDB; /* Slightly lighter footer background */
  color: #333;
  font-size: 0.9em;
}

/* Responsive Design */
@media (max-width: 768px) {
  .toc ul {
    flex-direction: column; /* Stack buttons vertically for smaller screens */
    align-items: center; /* Center buttons */
  }

  .toc ul li {
    margin-bottom: 10px; /* Add spacing between buttons */
  }
}