.content {
  padding-top: var(--full-content-top-padding);
  padding-bottom: var(--full-content-bottom-padding);
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center horizontally */
  align-items: flex-start; /* Align items to the left */
  max-width: var(--max-content-width); /* Maximum height for the <p> element */
  margin: 0 auto; /* Center the container when window is wider */
}

.content header, p {
    width: 100%; /* Make header and p fill the container width */
}

.subtitle {
  color: var(--seconday-color);
  font-size: 0.9em;
  margin-top: 0px;
}

.signature {
  color: var(--seconday-color);
  font-size: 0.9em;
}

.content ul {
  margin-top: 0px;
  margin-bottom: 0px;
}

.content li {
  padding-bottom: 10px;
}

.content a {
  color: var(--brand-color);
}

.content h2, h3, h4 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.blog-posts {
  padding: 0;
  width: 100%; /* take whole container width so dividers extend beyond text if needed */
}

.blog-post {
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.blog-post:not(:last-child) {
  border-bottom: 1px solid var(--background-border-secondary-color); /* Divider between posts */
}

.blog-post a.blog-post-title {
  font-size: 1.5em;
  font-weight: bold;
  color: var(--primary-color);
  padding-right: 10px;  /* spacing between the title and the datee */
}

.blog-post a {
  text-decoration: none; /* remove underline for Read more button */
}

.blog-post a:hover {
  text-decoration: underline; /* add underline for Read more button on hover */
}

.content h1, h2, h3, h4, h5 {
  scroll-margin-top: 80px; /* adds an offset to the auto-scroll position for anchor links to headers so they aren't covered by the nav bar */
}

@media screen and (max-width: 768px) {

  .content {
    /* Adjusted padding for smaller screens */
    padding-top: var(--small-content-top-padding);
    padding-bottom: var(--small-content-bottom-padding);
  }
}