html {
  margin: 0px 0px;
  background-color: #333;
  width: 100%;
  /* Set a base font size that scales fluidly between 16px and 22px */
  font-size: clamp(16px, 1.6vw, 20px);
}

body {
  margin: 0px 0px;
  background-color: #fff;
  width: 100%;
  /* Set a default line height for better readability */
  line-height: 1.6;
}

p {
  text-indent: 1.5em;
}

#ContentBody {
  background-color: #f6f6ef;
  width: 70%;
  display: block;
  margin-left: auto; /* Use auto for centering */
  margin-right: auto; /* Use auto for centering */
  min-height: 50vh;
  padding: 15px 5% 30px 5%; /* Consolidate padding rules */
  font-size: 1rem; /* Use rem to scale with the root html element */
}

/* Set responsive sizes for headings */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

h1 { font-size: clamp(2.0rem, 5vw, 3.0rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.5rem, 3.5vw, 2.0rem); }
h4 { font-size: clamp(1.2rem, 3vw, 1.5rem); }


@media screen and (max-width: 768px) {
  /* Adjust the layout for smaller screens */
  #ContentBody {
    width: 90%;
    margin-left: 3%;
    margin-right: 3%;
    padding-right: 2%;
    padding-left: 2%;
  }
}

#PageHeader {
  background-color: #e8e8e3; /* Darker Gray than the rest of the feed */
  padding: 2em 1.5em 0.5em 1.5em; /* top, right, bottom, left */
  margin: 0em -1.5em 0.5em -1.5em; /*Oversizes div slightly, but maintains content area*/
  border-radius: 8px;
}

#PageHeader h1 {
  margin-top: 0;
}

#PageHeader div{
  font-size: 1.1em;
  font-style: italic;
  color: #333;
  border-left: 4px solid #EE4242; /*EE is the answer to life*/
  padding-left: 1em;
  margin-top: 1em;
}

#PageHeader hr {
  border: none;
  height: 1px;
  background-color: #888;
  margin: 0 0;
}