@font-face {
  font-family: "Wintyr";
  src: url("../fonts/WintyrVF.woff2") format("woff2"),
    url("../fonts/WintyrVF.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Imbue";
  src: url("../fonts/Imbue.woff2") format("woff2"),
    url("../fonts/Imbue.ttf") format("truetype");
  font-weight: 100 900;
  font-display: block;
}

:root {
  --color-yellow: #ffe100;
  --line-thickness: 2pt;
}

html {
  scroll-behavior: smooth;
  text-transform: lowercase;
  position: relative;
}

body {
  font-size: 12pt;
  max-width: 45em;
  margin: auto;
  padding: 3em 1em;
  font-weight: 300;
  font-family: "Wintyr", monospace;
  font-optical-sizing: auto;
  font-style: normal;
  font-feature-settings: "ss01" 1, "ss08" 1, "ss13" 1;
}

html::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, #ccc 1px, transparent 1px);
  background-size: 24pt 24pt;
  background-position: calc((100vw - 45em) / 2 + 1em) 0;
  pointer-events: none;
  z-index: -1;
}

h1,
h2 {
  font-weight: 700;
  font-family: "Imbue", serif;
  font-style: italic;
}

h1 {
  font-size: 72pt;
  line-height: 72pt;
  margin: 120pt 0 72pt 0;
}

h2 {
  font-size: 48pt;
  line-height: 48pt;
  margin: 72pt 0 24pt 0;
}

h3 {
  font-family: "Wintyr", monospace;
  font-size: 12pt;
  line-height: 24pt;
  font-weight: 300;
  font-style: italic;
  margin: 48pt 0 24pt 0;
  display: flex;
  align-items: flex-start;
}

h3::after {
  content: "";
  flex: 1;
  min-width: 50%;
  margin-left: 1rem;
  height: var(--line-thickness);
  background-color: black;
  margin-top: calc(12pt - (var(--line-thickness) / 2));
}

h1,
h2,
ul {
  text-wrap: balance;
}

p,
li,
h3,
blockquote,
footer {
  line-height: 24pt;
}

code {
  font-family: "Wintyr", monospace;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 700;
  text-transform: none;
}

pre {
  margin: 36pt 0 36pt 0;
  outline: var(--line-thickness) solid black;
  padding: 12pt;
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

pre code {
  line-height: 24pt;
  font-weight: 300;
  font-variation-settings: "MONO" 1;
}

p,
ul,
img {
  margin: 0 0 24pt 0;
}

ul {
  padding-left: 24pt;
  list-style-type: square;
}

strong {
  font-weight: 700;
}

blockquote {
  margin: 0 0 24pt 24pt;
}

footer {
  margin: 48pt 0 24pt 0;
  font-style: italic;
  color: #666;
}

a,
a:visited {
  color: unset;
}

a:not([href*='//']):not([href*='mailto:']),
a:not([href*='//']):not([href*='mailto:']):visited
{
  text-decoration: none;
  background-color: black;
  color: #ddd;
  padding: 4pt;
  /* to keep the padding consistent for line breaks: */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  &:hover,
  &:active {
    background-color: var(--color-yellow);
    color: black;
  }
}

a[href*='mailto:'],
a[href*='//'],
a[href*='//']:visited
{
  padding: 4pt 0;
  text-decoration-thickness: var(--line-thickness);
  text-underline-offset: 4pt;

  &:hover,
  &:active {
    text-decoration: none;
    color: black;
    background-color: var(--color-yellow);
  }
}

img {
  width: 100%;
  outline: var(--line-thickness) solid black;
}