:root {
  --base-text-color: #333;
  --base-text-size: 100%;
  --font-stack: Avenir, Helvetica Neue, Helvetica, Arial, sans-serif;
  --base-line-height: 1.6;
  --background-color: #fff;
  --accent-color: #222; }

body {
  font-family: var(--font-stack);
  color: var(--base-text-color);
  line-height: var(--base-line-height);
  font-size: var(--base-text-size);
  background-color: var(--background-color); }

h1, h2, h3 {
  font-size: 1.2em;
  color: var(--accent-color); }

a, a:visited {
  color: var(--accent-color); }

main {
  max-width: 100ch;
  margin: 0 auto; }

.post-listing {
  display: grid;
  padding: 0 1em; }
  @media (min-width: 800px) {
    .post-listing {
      grid-template-columns: repeat(3, 1fr);
      gap: 0 2em; } }

.post-link {
  text-decoration: none; }

.post-link:hover {
  color: white;
  background: var(--accent-color); }

.post-list-item {
  list-style: none;
  padding: 0; }
  .post-list-item .post-excerpt p {
    margin-top: 0; }

.category-title {
  font-size: 2em;
  padding-bottom: 0;
  margin-bottom: 0; }