body {
  grid-template-columns: 1fr min(60rem,90%) 1fr;
}

p, h1, h2, h3, h4, h5, h6, #postlist, ul, ol, .photo-row-slim figure, blockquote {
  max-width: 45rem;
  margin-right: auto;
  margin-left: auto;
}

blockquote {
  max-width: 42rem;
  margin-right: auto;
  margin-left: auto;
}

header > nav {
  max-width: 45rem;
  margin-right: auto;
  margin-left: auto;
}

header {
  padding: 1.5rem .5rem 0 .5rem !important;
}

p.subtitle-2 {
  margin-top: -1.5rem;
  font-size: larger;
  color: var(--text-light);
}

p.subtitle-3 {
  margin-top: -1.3rem;
  font-size: large;
  color: var(--text-light);
}

ul.postlist {
  list-style: none;
  padding-inline-start: 0;
}

li.postitem {
  margin: 2rem 0;
  /* padding: 0.5rem; */
} 

li.postitem a {
  color: #212121;
  text-decoration: none;
}

li.postitem:hover {
  background-color: #f5f7ff;
  border-radius: 5px;
}

li.postitem p {
  margin: 0;
}

.posttitle {
  padding: 0.5rem 1rem 1rem;
}

p.title {
  font-size: 1.5rem;
  font-weight: 700;
}

p.lighter {
  color: #585858;
}

h1.post-title {
  margin-bottom: 0.5rem;
}

article {
  margin: 2rem 0;
}

p.subtitle {
  font-size: 1.5rem;
  /* font-weight: 500; */
  margin-top: 0.5rem;
  color: #585858;
}

.post-footer p {
  font-size: 1rem;
  margin: 0.5rem auto;
  color: #585858;
}

footer a {
  color: #585858 !important;
}

.littlefoot-footnote__button {
  background-color: #d8dae1;
  color: #585858;
}

.projects-display {
  display: flex;
  margin: 6rem 0;
}

a.postitem-link {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 42rem) {
  .projects-display {
    flex-direction: column;
  }

  a.postitem-link {
    flex-direction: column;
  }

  a.postitem-link > img {
    margin: auto;
    width: 90% !important;
  }

}

@media (prefers-color-scheme: dark) {

  li.postitem a {
    color: #dcdcdc;
  }

  li.postitem:hover {
    background-color: #2b2b2b;
  }

  p.lighter {
    color: #ababab;
  }

  .post-footer p {
    color: #ababab;
  }

  p.subtitle {
    color: #ababab;
  }

  footer a {
    color: #ababab !important;
  }
  .littlefoot-footnote__button {
    background-color: #585858;
    color: #fff;
  }

  .littlefoot-footnote__content {
    background-color: #2b2b2b;
    color: #dcdcdc;
  }

  .littlefoot-footnote {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  }
}