body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: 1.6;
}

a {
  color: var(--color-link);
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

h1 {
  font-family: var(--font-sans-serif);
  font-size: var(--step-5);
  font-weight: bold;
}

h2 {
  font-family: var(--font-sans-serif);
  font-size: var(--step-3);
  font-weight: bold;
}

h3 {
  font-family: var(--font-sans-serif);
  font-size: var(--step-1);
  font-weight: bold;
}

h4 {
  font-family: var(--font-sans-serif);
  font-size: var(--step-0);
  font-weight: bold;
}

/* Header highlighting */
h1 > span,
h2 > span,
h3 > span,
h4 > span {
  display: inline;
  box-decoration-break: clone;
}

h1 > span {
  background-image: linear-gradient(
    0deg,
    var(--highlight-orange) 30%,
    transparent 30%
  );
}

h2 > span {
  background-image: linear-gradient(
    0deg,
    var(--highlight-blue) 30%,
    transparent 30%
  );
}

h3 > span {
  background-image: linear-gradient(
    0deg,
    var(--highlight-green) 30%,
    transparent 30%
  );
}

h4 > span {
  background-image: linear-gradient(
    0deg,
    var(--highlight-pink) 30%,
    transparent 30%
  );
}

mark {
  background-color: transparent;
  background-image: linear-gradient(
    0deg,
    var(--highlight-yellow) 30%,
    transparent 30%
  );
}

/* general layout */
.container {
  max-width: 1140px;
  margin: 0 auto var(--space-xl) auto;
}

/* post layout */
.post {
  display: grid;
  grid-template-columns:
    minmax(5px, 1fr)
    minmax(310px, 60ch)
    minmax(5px, 1fr);
}

.post > * {
  /* position text paragraphs into the second (middle) column */
  grid-column: 2;
}

.post > .responsive-img {
  /* position images to take up all three columns */
  grid-column: 1 / 4;
  justify-self: center;
}

.post > video {
  /* position images to take up all three columns */
  grid-column: 1 / 4;
  justify-self: center;
  width: 100%; /* large screens */
}

.post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--step--1);
}

.byline {
  display: inline;
  margin-bottom: 0;
  color: var(--color-text-subtle);
  font-size: var(--step--1);
}

.blog-title {
  margin-top: var(--space-s);
  margin-bottom: var(--space-m);
}

.post > h2 {
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
}

.post > h3 {
  margin-top: var(--space-m);
  margin-bottom: var(--space-xs);
}

.post > h4 {
  margin-top: var(--space-m);
  margin-bottom: var(--space-xs);
}

.post > p,
ul,
blockquote {
  display: block;
  margin-block: 0 var(--space-l);
}

/* header and footer areas */

.menu {
  display: flex;
  justify-content: flex-start;
  padding: 0;
  list-style-type: none;
}

.menu li {
  padding-right: 3ch;
}

.nav-link {
  color: var(--color-link);
  text-decoration: none;
}

hr {
  border-style: dashed;
  border-color: var(--color-text-subtle);
  opacity: 0.3;
}

blockquote {
  padding: 3px 1em;
  border-left: 5px solid var(--color-text-subtle);
  background-color: color-mix(
    in srgb,
    var(--color-bg) 95%,
    var(--color-text) 5%
  );
}

/* Medium screens */
@media (width >= 768px) {
  .post > pre {
    grid-column: 1 / 4;
  }
}

@media all and (width <= 800px) {
  .menu {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (width <= 500px) {
  .menu {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}