body {
  max-width: 40em;
  margin: 0 auto;
  padding: 5px;
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.6em;
  color: #000;
  background-color: #D9D9D6;
}

hr {
  display: block;
  height: 2px;
  border: 0;
  border-top: 2px solid #5D6878;
  margin: 1em 0;
  padding: 0;
}

hr.light-break {
  display: block;
  height: 1px;
  width: 90%;
  border: 0;
  border-top: 1px solid #5D6878; /* Adjusted to 1px to match the height you've set */
  margin: 1em auto; /* Updated for automatic horizontal centering */
  padding: 0;
  opacity: 0.5; /* Makes the line half as opaque */
}

h1, h2, h3 {
  font-family: sans-serif;
  font-weight: normal;
  text-decoration: none;
}

h1 a:hover {
  text-decoration: underline;
}

ul.navigation {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center; /* Center the navigation links */
}

ul.navigation li {
  display: inline;
}

ul.navigation li a {
  display: inline-block; /* Display the links horizontally */
  padding: 5px;
  text-decoration: none;
  color: #000;
  white-space: nowrap; /* Prevent line breaks */
}

ul.navigation li a:hover {
  text-decoration: underline;
}

ul.navigation li a.highlight {
  color: #283618;
  text-decoration: underline;
}

a {
  color: #283618;
  text-decoration: underline;
}

.content .explain {
  font-size: 0.9em;
  font-style: italic;
}

footer {
  font-size: 0.9em;
  text-align: center;
  padding: 10px;
}

sub {
  font-style: italic;
}

/* Media Query for Mobile Devices */
@media (max-width: 767px) {
  ul.navigation li:not(:last-child)::after {
    content: none; /* Hide separator pipe on mobile devices */
  }
}