@import "./fonts/Inter/inter.css";
@import "./fonts/JetBrainsMono.css";
@import "./fonts/Monocraft.css";

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

@source "../**/*.go";
@source "../**/*.templ";

:root {
  --primary: #54d7a9;
  --secondary: #9b7eca;
  --accent: #7ed4fb;
  --extra: #8fcc75;
  --text: #ffffff;
  --alt: #999999;
  --background: #000000;
  --font-mono: "Jetbrains Mono", monospace;
  --font-normal: "Inter", system-ui, sans-serif;
}

html {
  background-color: var(--background);
  color: var(--text);
  font-family: var(--font-mono);
  user-select: none;

  font-size: 1vw;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  /* font-family: var(--font-mono); */
}

@layer base {
  a {
    font-weight: 300;
    text-decoration: none;
    color: var(--secondary);
    transition-duration: 0.2s;
    transition-property: color, text-decoration;
  }
  a:hover {
    text-decoration: underline;
    color: var(--accent);
  }
}

.scrollbox::-webkit-scrollbar {
  width: 1.5rem;
}
.scrollbox::-webkit-scrollbar-track {
  background: transparent;
  border-left: 0.1rem solid var(--alt);
}
.scrollbox::-webkit-scrollbar-thumb {
  background: var(--primary);
  border: 0.3rem solid transparent;
  background-clip: padding-box;
  border-radius: 0;
}
.scrollbox::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

@supports not selector(::-webkit-scrollbar) {
  .scrollbox {
    scrollbar-color: var(--primary) transparent;
  }
}

@plugin "@tailwindcss/typography";

.prose {
  --tw-prose-body: var(--text);
  --tw-prose-headings: var(--primary);
  --tw-prose-links: var(--secondary);
  --tw-prose-bold: var(--text);
  --tw-prose-bullets: var(--alt);
  --tw-prose-counters: var(--alt);
  --tw-prose-hr: var(--alt);
  --tw-prose-quotes: var(--text);
  --tw-prose-quote-borders: var(--alt);
  --tw-prose-captions: var(--alt);
  --tw-prose-code: var(--extra);
  --tw-prose-pre-code: var(--text);
  --tw-prose-pre-bg: rgb(0 0 0 / 0.3);
  --tw-prose-th-borders: var(--alt);
  --tw-prose-td-borders: var(--alt);
}

/* .prose a[target="_blank"]::after { content: " ↗"; font-size: 0.8em; } */

/* headings: color, size, spacing above/below */
/* .prose h1 { color: var(--accent);  font-size: 1.9em; margin: 1.6em 0 0.6em; } */
/* .prose h2 { color: var(--primary); font-size: 1.5em; margin: 1.6em 0 0.5em; } */
/* .prose h3 { color: var(--primary); font-size: 1.2em; margin: 1.4em 0 0.4em; } */

/* paragraph and list spacing */
/* .prose p, .prose ul, .prose ol { margin: 1em 0; } */
/* .prose li { margin: 0.3em 0; } */

/* links, with no underline on footnote refs */
/* .prose a { text-decoration: none; } */
/* .prose a:hover { text-decoration: underline; } */
.prose a.footnote-ref,
.prose a.footnote-ref:hover {
  text-decoration: none;
}

/* quotes: drop the plugin's quote marks */
/* .prose blockquote { border-left: 0.2em solid var(--alt); padding-left: 1em; font-style: normal; } */
/* .prose blockquote p::before, .prose blockquote p::after { content: none; } */

/* inline code: drop the plugin's backticks, add a tag-like background */
.prose code::before,
.prose code::after {
  content: none;
}
.prose :not(pre) > code {
  padding: 0.1em 0.4em;
  border-radius: 0.3em;
  background: color-mix(in srgb, var(--alt) 25%, transparent);
  font-size: 0.9em;
}

/* the article uses the proportional font, so code needs the mono one back */
.prose pre,
.prose code {
  font-family: var(--font-mono);
}

.js .footnotes {
  display: none;
}

.sidenotes {
  position: fixed;
  overflow: hidden;
  pointer-events: none;
}

.sidenote {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--background);
  font-family: var(--font-normal);
  font-size: 16px;
  line-height: 1.4;
  pointer-events: auto;
}

.sidenotes.bordered .sidenote {
  border: 0.1rem solid var(--alt);
  padding: 0.4rem 0.6rem;
}

.sidenote-num {
  font-size: 70%;
  color: var(--secondary);
  margin-right: 0.15em;
}

.chroma .k,
.chroma .kc,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr,
.chroma .kt {
  color: var(--secondary);
}
.chroma .nf,
.chroma .nc,
.chroma .nb {
  color: var(--primary);
}
.chroma .s,
.chroma .sa,
.chroma .sb,
.chroma .sc,
.chroma .dl,
.chroma .sd,
.chroma .s2,
.chroma .se,
.chroma .sh,
.chroma .si,
.chroma .sx,
.chroma .sr,
.chroma .s1,
.chroma .ss {
  color: var(--extra);
}
.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .il,
.chroma .mo {
  color: var(--primary);
}
.chroma .c,
.chroma .ch,
.chroma .cm,
.chroma .c1,
.chroma .cs,
.chroma .cp,
.chroma .cpf {
  color: var(--alt);
  font-style: italic;
}

.codeblock {
  margin: 1.2em 0;
  border: 0.1rem solid var(--alt);
  border-radius: 0.4rem;
  background: rgb(0 0 0 / 0.3);
  overflow: hidden;
}
.codeblock::before {
  content: attr(data-lang);
  display: block;
  padding: 0.2em 0.8em;
  border-bottom: 0.1rem solid var(--alt);
  font-size: 0.75em;
  color: var(--alt);
}
.codeblock[data-lang=""]::before {
  display: none;
}
.codeblock pre {
  margin: 0;
  padding: 0.8em 1em;
  background: transparent;
  border-radius: 0;
  overflow-x: auto;
  font-size: 0.85em;
  line-height: 1.5;
}

@keyframes pop {
  50% {
    transform: scale(1.3);
  }
}
[data-copied] svg {
  animation: pop 0.25s;
}

@keyframes bump {
  50% {
    transform: scale(1.03);
  }
}