body#blog-post,
body#blog {
  color: var(--tonic-primary);
}

body#blog-post main .content,
body#blog main .content {
  max-width: 800px;
  margin: 100px auto;
}

@media (max-width: 699px) {
  body#blog-post main .content,
  body#blog main .content {
    width: 80%;
    display: block;
  }
}

body#blog > main {
  padding: 15%;
  min-height: initial;
}

body#blog > main > ul > li {
  display: grid;
  grid-template-columns: auto 1fr;
}

body#blog > main > ul > li img {
  margin: 32px;
  width: 64px;
  height: 64px;
  background: var(--tonic-secondary);
  border-radius: 12px;
  filter: grayscale(1) invert(1);
  padding: 10px;
}

body#blog-post h1 {
  font: 42px/52px var(--tonic-header);
  margin: 0;
  margin-bottom: 20px;
}

body#blog-post h2,
body#blog h2 {
  font-family: var(--tonic-body);
  font-size: 1.6em;
  line-height: 1.6em;
  margin-top: 32px;
}

body#blog-post h3,
body#blog h3 {
  font-size: 1.2em !important;
  text-transform: uppercase;
  font-weight: 100;
  margin-top: 40px !important;
  letter-spacing: .8px;
}

body#blog-post pre,
body#blog pre {
  max-width: 100%;
  overflow: auto;
  background: var(--tonic-background);
  padding: 20px;
}

body#blog-post header,
body#blog header {
  margin: 0;
  height: 450px;
  position: relative;
  background-size: cover;
  background-color: var(--tonic-shadow);
}

body#blog.toc header {
  display: grid;
  align-items: center;
  text-transform: uppercase;
  font-size: 24px;
  letter-spacing: 2px;
}

body#blog.toc h2 {
  margin-bottom: 8px;
}

body#blog-post header img,
body#blog header img {
  width: 350px;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 699px) {
  body#blog.toc header {
    background-size: 750px;
    background-position-y: 50px;
  }

  body#blog-post header img,
  body#blog header img {
    width: 250px;
  }

  body#blog > main > ul > li img {
    display: none;
  }

  body#blog > main > ul > li {
    margin-bottom: 40px;
  }
}

@media (prefers-color-scheme: dark) {
  body#blog-post header {
    background-color: var(--tonic-dark);
  }
  body#blog-post img {
    filter: invert(1);
  }
}

body#blog-post img,
body#blog img {
  max-width: 100%;
}

body#blog-post .kb,
body#blog .kb {
  border-bottom: 1px dashed var(--tonic-primary);
}

body pre code {
  background-color: transparent;
}

body#blog-post ul li {
  line-height: 30px !important;
  font-size: initial !important;
}