@import "syntax-highlighting.css";

@font-face {
  font-family: "Comic";
  /* Available under the SIL Open Font License version 1.1 */
  src:
    local("Comic Relief"),
    local("Comic Sans MS"),
    url("comic-relief.subset.ttf");
}

@font-face {
  font-family: "code";
  /* Available under the SIL Open Font License version 1.1 */
  src:
    local("Iosevka Term"),
    url("iosevka-term-regular.subset.ttf");
}

html {
  /* --text-color: hsl(325, 100%, 50%); */
  --text-color: hsl(325, 100%, 100%);
  font-family: "Comic";
  color: var(--text-color);
  background-color: hsl(265, 100%, 5%);
  font-size: 14pt;
  --link-color: hsl(225, 100%, 90%);
}

body {
  margin: 0 auto;
  max-width: 36em;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 50px;
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  /* default, but needs to be present for anchor links to be able to use absolute position */
  position: static;
}

.date {
  opacity: 0.8;
}

.article-list>li::marker {
  /* alternatives (possibly with serif font face): ☛☞⁍✒︎➭  */
  content: "✰ ";
}

a {
  color: var(--link-color);
}

.footnote-reference {
  margin-left: 0.1em;

  a {
    text-decoration: none;
  }
}

.footnote-reference::before {
  content: "[";
  color: var(--link-color);
}

.footnote-reference::after {
  content: "]";
  color: var(--link-color);
}

.footnotes-list>li>p>a:last-child {
  text-decoration: none;
}

blockquote {
  opacity: 0.8;
}

code {
  word-break: break-all;
}

pre {
  overflow-x: auto;
  overflow-y: hidden;
  font-size: 85%;
}

/* inline code */
:not(pre)>code {
  font-size: 85%;
}

/* Line numbers */
.giallo-ln {
  display: inline-block;
  user-select: none;
  margin-right: 0.4em;
  padding: 0.4em;
  min-width: 3ch;
  text-align: right;
  opacity: 0.8;
}

code[data-label]::before {
  color: var(--text-color);
  opacity: 0.7;
  content: "[" attr(data-label)"]";
  display: block;
}

h2 {
  position: relative;
}

.anchor {
  position: absolute;
  left: -0.9em;
  text-decoration: none;
  display: none;
  /* prevent hover from ending when moving cursor from the heading to the anchor */
  padding-right: 1em;
}

*:hover>.anchor {
  display: inline;
}

#cursor-trail-pane {
  position: fixed;
  animation: 70s forwards trail-visibility;
}

@keyframes trail-visibility {
  from {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.obnoxious-cursor-trail {
  font-size: 50%;
  user-select: none;
  pointer-events: none;
}

@keyframes fadeout {
  from {
    translate: 0 0;
    scale: 1 1;
    opacity: 1;
    rotate: 10deg;
  }

  to {
    translate: 0 1em;
    scale: 0.4 0.4;
    opacity: 0;
    rotate: 200deg;
  }
}