/* -------------------------------------------------------------------------- */
/* Blog typography                                                            */
/* -------------------------------------------------------------------------- */

.post-content {
  line-height: 1.5;
	margin-inline: 4rem;
}

/* -------------------------------------------------------------------------- */
/* Typography                                                         */
/* -------------------------------------------------------------------------- */

:root {
  --blog-body-color: var(--darker);
  --blog-heading-color: hsl(210 80% 15%);
  --blog-link-color: hsl(210 80% 50%);
  --blog-link-decoration-color: var(--dark);
  --blog-marker-color: var(--accent);

  --blog-quote-background: hsl(210 10% 80%);
  --blog-quote-handle: hsl(210 10% 75%);
}

.dark {
  --blog-body-color: #e0f2fe;
  --blog-heading-color: hsl(210 70% 70%);
  --blog-link-color: hsl(210 80% 70%);
  --blog-link-decoration-color: #7dd3fc;
  --blog-marker-color: #38bdf8;

  --blog-quote-background: hsl(210 10% 20%);
  --blog-quote-handle: hsl(210 10% 50%);
}

/* -------------------------------------------------------------------------- */
/* Responsive body typography                                                 */
/* -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .post-content {
    font-size: 1.125rem;
    margin-inline: 8rem;
  }
}
@media (min-width: 60rem) {
  .post-content {
    font-size: 1.2rem;
    margin-inline: 12rem;
  }
}
@media (min-width: 80rem) {
  .post-content {
    font-size: 1.25rem;
    margin-inline: 16rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Headings                                                                   */
/* -------------------------------------------------------------------------- */

.post-content {
  color: var(--blog-body-color);
  transition:
		color 300ms ease-in-out;

}

.post-content :where(h1, h2, h3, h4, h5, h6) {
  color: var(--blog-heading-color);
  margin: 2.5rem 0 1rem;

  line-height: 1.1;
  font-family: var(--accentFont);
  font-weight: 700;

  text-wrap: balance;
  transition:
		color 300ms ease-in-out,
}

.post-content p {
  margin: 0.5rem 0 0.5rem;
}

.post-content h1 {
  margin: 0 0 2rem;

  /* position: relative; */
  /* overflow: hidden; */

  font-size: clamp(2.5rem, calc(2.5rem + 1vw), 3.5rem);
}

.post-content h2 {
  font-size: clamp(1.8rem, calc(1.8rem + 1vw), 2.5rem);
}

.post-content h3 {
  font-size: clamp(1.6rem, calc(1.6rem + 1vw), 2rem);
}

.post-content h4 {
  font-size: clamp(1.5rem, calc(1.5rem + 1vw), 1.8rem);
}

.post-content h5 {
  font-size: clamp(1.35rem, calc(1.35rem + 1vw), 1.5rem);
}

.post-content h6 {
  font-size: clamp(1.1rem, calc(1.1rem + 1vw), 1.25rem);
}

/* -------------------------------------------------------------------------- */
/* Quotes                                                                      */
/* -------------------------------------------------------------------------- */

.post-content blockquote {
  border-radius: 0 12px 12px 0;
  margin: 1rem 0 0;
  border-left: 4px solid var(--blog-quote-handle);
  padding: 8px 16px;
  color: var(--blog-body-color);
  background: var(--blog-quote-background);
  padding-right: 0;

  transition:
    color 300ms ease-in-out,
    background 300ms ease-in-out;
    border-left-color 300ms ease-in-out;
}

/* -------------------------------------------------------------------------- */
/* Links                                                                      */
/* -------------------------------------------------------------------------- */

.post-content a {
  color: var(--blog-link-color);

  text-decoration-thickness: 1px;
  text-decoration-color: var(--blog-link-decoration-color);

  transition:
    color 300ms ease-in-out,
    text-decoration-color 300ms ease-in-out;
}

/* -------------------------------------------------------------------------- */
/* Lists                                                                      */
/* -------------------------------------------------------------------------- */

.post-content ul {
  padding-left: 1.5rem;
  list-style-type: square;
}

.post-content ul ul {
  list-style-type: circle;
}

.post-content ul > * > *::marker {
  color: var(--blog-marker-color);

  transition: color 300ms ease-in-out;
}

.post-content img:not(.cover-image) {
  margin: 2rem 0 2rem;
  display: block;
  width: var(--image-width, 50%);;
  max-width: 100%;
  margin-inline: auto;
}


/* -------------------------------------------------------------------------- */
/* Code                                                                      */
/* -------------------------------------------------------------------------- */

.post-content pre {
  border-radius: 8px;
  margin: 1.5rem 0;
  border: 1px solid var(--blog-quote-handle);
  padding: 16px;
  color: var(--blog-body-color);
  overflow-x: auto;

  transition:
    color 300ms ease-in-out,
    background 300ms ease-in-out,
    border-color 300ms ease-in-out;
}

.post-content :not(pre) code  {
  border-radius: 4px;
  border: 1px solid var(--blog-quote-handle);
  padding: 2px 4px;
  color: var(--blog-body-color);
  /* background: var(--blog-quote-background); */

  transition:
    color 300ms ease-in-out,
    background 300ms ease-in-out;
    border-left-color 300ms ease-in-out;
}


/* -------------------------------------------------------------------------- */
/* Prism Tokens I stole                                                       */
/* -------------------------------------------------------------------------- */

/* Light */

.post-content .token.comment,
.post-content .token.prolog,
.post-content .token.doctype,
.post-content .token.cdata {
  color: #6a737d;
}

.post-content .token.punctuation {
  color: #24292e;
}

.post-content .token.property,
.post-content .token.tag,
.post-content .token.boolean,
.post-content .token.number,
.post-content .token.constant,
.post-content .token.symbol {
  color: #005cc5;
}

.post-content .token.selector,
.post-content .token.attr-name,
.post-content .token.string,
.post-content .token.char,
.post-content .token.builtin {
  color: #032f62;
}

.post-content .token.operator,
.post-content .token.entity,
.post-content .token.url,
.post-content .token.variable {
  color: #d73a49;
}

.post-content .token.atrule,
.post-content .token.attr-value,
.post-content .token.keyword {
  color: #d73a49;
}

.post-content .token.function,
.post-content .token.class-name {
  color: #6f42c1;
}

.post-content .token.regex,
.post-content .token.important {
  color: #e36209;
}

/* Dark */

.dark .post-content pre {
  background-color: var(--blog-quote-background);
}

.dark .post-content .token.comment,
.dark .post-content .token.prolog,
.dark .post-content .token.doctype,
.dark .post-content .token.cdata {
  color: #6a9955;
}

.dark .post-content .token.punctuation {
  color: #d4d4d4;
}

.dark .post-content .token.property,
.dark .post-content .token.tag,
.dark .post-content .token.boolean,
.dark .post-content .token.number,
.dark .post-content .token.constant,
.dark .post-content .token.symbol {
  color: #4ec9b0;
}

.dark .post-content .token.selector,
.dark .post-content .token.attr-name,
.dark .post-content .token.string,
.dark .post-content .token.char,
.dark .post-content .token.builtin {
  color: #ce9178;
}

.dark .post-content .token.operator {
  color: #d4d4d4;
}

.dark .post-content .token.keyword {
  color: #569cd6;
}

.dark .post-content .token.function {
  color: #dcdcaa;
}

.dark .post-content .token.class-name {
  color: #4ec9b0;
}