/*------------------------ STORY STYLES ---------------------------*/
header.blog-header {
  margin-block: 2em;
  margin-inline: auto;
  width: min(700px, 100% - 2rem);
  text-align: center;

  & h1 {
    font-style: italic;
    margin-block: 1em;
    letter-spacing: -0.05em;
    color: var(--text-1);
  }

  & p {
    font-family: "Space Mono", "Iosevka", sans-serif;
    margin-block: 0.4em;
    opacity: 0.6;
  }

  & .tags span {
    display: inline-block;
    padding: 0 3px;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    font-weight: bold;
    text-wrap: nowrap;
    background: oklch(
      from var(--tag-chip-color, #ccc) calc(max(l, 0.7)) calc(min(c, 0.15)) h
    );
    color: oklch(
      from var(--tag-chip-color, #444) calc(l * 0.4) calc(c * 0.8) h
    );
    border-radius: 3px;

    &::after {
      content: attr(title);
    }

    &[title="✎hidden"] {
      --tag-chip-color: #ffeeff;
    }

    /* content types */

    &[title="essay"] {
      --tag-chip-color: #eeeeee;
    }

    &[title="µpost"] {
      --tag-chip-color: #aaaaaa;
    }

    &[title^="/"] {
      --tag-chip-color: #ffffc5;
    }

    &[title="↗"] {
      --tag-chip-color: #ffffff;
    }

    /* topics */

    &[title="algo"] {
      --tag-chip-color: #00ffff;
    }

    &[title="art"] {
      --tag-chip-color: #ff88bb;
    }

    &[title="games"] {
      --tag-chip-color: #00ff00;
    }

    &[title="keyboard"] {
      --tag-chip-color: #77ccff;
    }

    /* brands */

    &[title="c"] {
      /* from gcc logo */
      --tag-chip-color: #e2bb9e;
    }

    &[title="css"] {
      --tag-chip-color: rebeccapurple;
    }

    &[title="js"] {
      --tag-chip-color: #f7df1e;
    }

    &[title="html"] {
      --tag-chip-color: #fcbe03;
    }

    &[title="rust"] {
      --tag-chip-color: #f46623;
    }

    &[title="android"] {
      --tag-chip-color: #3ddc84;
    }
  }

}

article.blog-content {
  --tag-chip-color: #bbbbbb;

  --text-3: #e8e8e8;
  font-family: "Miriam Libre", "Space Mono", Iosevka, sans-serif;
  font-weight: 400;
  width: min(700px, 100% - 2rem);
  margin-inline: auto;

  & h5 {
    font-family: "Space Mono";
    font-size: 1.5em;
    font-style: italic;
    color: #b6b6b6;
  }

  & > p {
    margin-block: 2em;
    line-height: 2.5;
    color: var(--text-3);
    font-weight: 500;
    word-wrap: break-word;
    text-wrap: pretty;
  }

  & h3 {
    font-family: Iosevka, "Space Mono", "Comic Sans MS", sans-serif;
  }
}

h2 {
  margin-block: 2em;
  font-weight: bold;
  letter-spacing: normal;
  font-size: 2em;
  color: var(--text-1);
  text-align: center;
}

.stories-container {
  & h3 {
    font-family: Iosevka, "Space Mono", Iosevka, sans-serif;
    font-weight: bold;
    color: var(--text-2);
    opacity: 80%;
    font-style: italic;
  }

  & li {
    padding-block: 1rem;
    display: block;
    color: var(--text-1);
    border-bottom: 1px solid var(--overlay-2);
    transition: all 200ms ease-in;
    font-style: italic;
    font-weight: 400;

    & a {
      text-decoration: none;
      color: inherit;
    }

    &:hover {
      background: var(--overlay-2);
      color: var(--text-2);
      padding-inline: 1rem;
    }

    & .story-date {
      font-family: Iosevka;
      font-size: 0.8em;
      float: right;
      font-weight: bold;
      color: var(--text-3);
      opacity: 80%;
    }

  }
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6272a4;
}

.token.punctuation {
  color: #f8f8f2;
}

.namespace {
  opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #ff79c6;
}

.token.boolean,
.token.number {
  color: #bd93f9;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #50fa7b;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
  color: #f1fa8c;
}

.token.keyword {
  color: #8be9fd;
}

.token.regex,
.token.important {
  color: #ffb86c;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

@media screen and (-ms-high-contrast: active) {
  .token.important {
    background: highlight;
    color: window;
    font-weight: normal;
  }

  .token.atrule,
  .token.attr-value,
  .token.function,
  .token.keyword,
  .token.operator,
  .token.selector {
    font-weight: bold;
  }

  .token.attr-value,
  .token.comment,
  .token.doctype,
  .token.function,
  .token.keyword,
  .token.operator,
  .token.property,
  .token.string {
    color: highlight;
  }

  .token.attr-value,
  .token.url {
    font-weight: normal;
  }
}

}