:root {
  --c-text-n: light-dark(hsl(0, 0%, 33%), hsl(219, 20%, 70%));
  --c-tex-d: light-dark(hsl(0, 0%, 50%), hsl(219, 5%, 30%));
}

main {
  display: flex;
  overflow-x: hidden;
  flex-direction: column;
}

article {
  font-family: var(--ff-jb-mono);
  max-width: 60ch;
  width: 100%;
  box-sizing: border-box;
  color: var(--c-text);
  margin-bottom: 5vh;
  padding: 2rem;

  &,
  * {
    overflow-wrap: break-word;
    word-break: break-word; /* optional */
  }
}

article header {
  ul {
    font: var(--font-mono);
    list-style: none;
    width: 100vw;
    padding-left: 0;
    color: var(--c-tex-d);

    span {
      color: light-dark(
        hsl(from var(--c-tex-d) h s calc(l - 13)),
        hsl(from var(--c-tex-d) h s calc(l + 13))
      );
    }

    &::before,
    &::after {
      content: "---";
    }

    li + li {
      margin-top: 1px;
    }

    li::marker {
      content: "";
    }
  }
}
:is(h1, h2, h3, h4, h5, h6) {
  margin-block: 25px;
  text-wrap: unset;
  &:before {
    color: light-dark(
      hsl(from var(--c-tex-d) h s calc(l + 10)),
      hsl(from var(--c-tex-d) h s calc(l - 10))
    );
  }
}
h1 {
  text-align: left;
  font-size: 3rem;
  &:before {
    content: "# ";
  }
}
h2 {
  font-size: 1.7rem;
  &:before {
    content: "## ";
  }
}
h3 {
  &:before {
    content: "### ";
  }
}
h4 {
  &:before {
    content: "#### ";
  }
}
h5 {
  &:before {
    content: "##### ";
  }
}
h6 {
  &:before {
    content: "###### ";
  }
}

p,
li {
  font-size: 1rem;
}

ul {
  padding-left: 18px;
  li {
    &::marker {
      content: "- ";
      color: var(--c-highlight);
      color: var(--c-tex-d);
    }
  }
}

hr {
  margin-top: 20px;
  border: none;
  border-bottom: 1.8px dashed
    light-dark(hsl(from var(--c-tex-d) h s calc(l + 20)), var(--c-tex-d));
}

article b {
  font-weight: bolder;

  &:before {
    content: "**";
    color: var(--c-tex-d);
  }
  &:after {
    content: "**";
    color: var(--c-tex-d);
  }
}

main footer {
  font-family: var(--ff-mono);
  margin-top: auto;
  text-align: center;
  font-size: 1rem;
  padding: 5px;

  a:any-link {
    white-space: nowrap;
    color: light-dark(orangered, orange);
    text-decoration: none;

    &::selection {
      color: light-dark(orangered, orange);
    }

    &:hover,
    &:hover::selection {
      color: light-dark(orangered, orange);
      text-decoration: underline 1.5px;
      text-underline-offset: 2px;
    }

    &:active,
    &:active::selection {
      color: light-dark(orangered, orange);
      text-decoration: underline 1.5px;
      text-underline-offset: 2px;
    }
  }
}

article a[target="_blank"] {
  text-decoration: none;
  white-space: nowrap;

  &:hover {
    text-decoration: underline 1.2px solid var(--c-tex-d);
  }

  &:before {
    content: "[";
    font-weight: lighter;
    white-space: nowrap;
    text-decoration: none !important;
    color: var(--c-tex-d);
  }
  &:after {
    content: "](↗)";
    font-weight: lighter;
    white-space: nowrap;
    text-decoration: none !important;
    color: var(--c-tex-d);
    mask: none;
    background-color: transparent;
    margin: 0;
    display: inline;
    font-size: inherit;
    vertical-align: bottom;
  }
}

img[src="/SRC/asset/svg/rss.svg"],
img[src="/SRC/asset/svg/ng.svg"] {
  display: inline-block;
  padding: 1px;
  padding-right: 5px;
  user-select: none;
  transform: translateY(4px);
}

mark {
  background-color: transparent;

  &::after {
    content: ",";
  }

  a:any-link {
    color: light-dark(
      hsl(from var(--c-tex-d) 220 100% calc(l - 10)),
      hsl(from var(--c-tex-d) 210 100% calc(l + 10))
    );

    font-weight: lighter !important;
    text-decoration: none;

    &::before {
      content: "#";
    }

    &:hover {
      text-decoration: 1.5px solid underline;
      color: light-dark(
        hsl(from var(--c-tex-d) 210 100% calc(l + 5)),
        hsl(from var(--c-tex-d) 210 100% calc(l + 20))
      );
    }
  }
}

@media (max-width: 660px) {
  article {
    padding: 10px 10px;
    width: 100%;
  }

  h1 {
    font-size: 2rem;
    margin: 0.9rem 0;
  }
  h2 {
    font-size: 1.5rem;
    line-height: 1.2;
  }
}