@font-face {
  font-family: "Iosevka Term SS09";
  font-style: normal;
  font-weight: normal;
  src: url("/iosevka-term-ss09-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Iosevka Term SS09";
  font-style: normal;
  font-weight: bold;
  src: url("/iosevka-term-ss09-bold.woff2") format("woff2");
}

::selection {
  color: var(--select-fg);
  background-color: var(--select-bg);
}

html,
pre,
code {
  font-family: "Iosevka Term SS09", "Lucida Console", "Courier New", Courier,
    monospace;
  font-feature-settings: "calt" 0, "dlig" 1;
}

html {
  font-size: px-to-em($font-size, 16px);
  line-height: $line-height;
  background-color: var(--bg);
  color: var(--fg);
}

body {
  margin: 2em;
  padding: 0;

  @media (max-width: $breakpoint-sm) {
    margin: 1em;
  }
}

main {
  max-width: 70ch;
  margin: 0 auto;
}

code {
  color: var(--code-fg);
}

pre {
  margin: 0;
  color: var(--code-block-fg);
  font-size: $code-block-font-size;
  line-height: $code-block-line-height;

  strong {
    font-weight: normal;
  }
}

strong {
  color: var(--fg-plus);
  font-weight: bold;
}

ul,
ol {
  margin: ($line-height * 1rem) 0 0;
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  padding-left: $subcontent-indent;

  &::before {
    position: absolute;
    display: inline-block;
    width: $subcontent-indent;
    margin-left: -1 * $subcontent-indent;
    color: var(--fg-minus);
  }
}

ul > li::before {
  content: "-";
}

ol {
  counter-reset: cnt;

  > li {
    counter-increment: cnt;

    &::before {
      content: counter(cnt) ".";
    }
  }
}

h1,
h2,
h3 {
  margin: ($line-height * 2rem) 0 0;

  + h1,
  + h2,
  + h3 {
    margin-top: $line-height * 1rem;
  }
}

h1 {
  text-transform: uppercase;
  font-size: px-to-em($heading-font-size);
  color: var(--heading);
}

h2 {
  font-size: 1em;
  color: var(--heading);
}

h3 {
  font-size: 1em;
}

p {
  margin: ($line-height * 1em) 0 0;
  hyphens: auto;
}

:link,
:visited {
  position: relative;
  z-index: 1000;
  padding: 0.1em 0.3em;
  margin: 0 -0.3em;
  color: var(--link-idle-fg);

  &:hover {
    background-color: var(--link-hover-bg);
    color: var(--link-hover-fg);
    text-decoration: none;
  }
}

:visited {
  color: var(--link-visited-fg);
}

hr {
  height: 1px;
  margin: ($line-height * 2rem) 0 ($line-height * 2rem);
  background-color: var(--bg-plus);
  border: 0;

  @media (max-width: $breakpoint-sm) {
    margin-left: 0;
  }
}

blockquote {
  position: relative;
  margin: ($line-height * 1rem) 0 0;
  padding-left: calc(#{$subcontent-indent} - 2px);
  border-left: 2px solid var(--bg-plus);
}