/*********
 # COLORS
 *********/

:root {
  --gray1: rgb(14 16 27);
  --gray2: rgb(28 33 49);
  --gray3: rgb(52 59 82);
  --gray4: rgb(87 94 120);
  --gray5: rgb(138 144 166);
  --gray6: rgb(200 204 217);
  --gray7: rgb(249 251 255);

  --light-blue: rgb(69 212 243);
  --blue: rgb(28 168 239);
  --dark-blue: rgb(63 46 231);
  --lilac: rgb(187 121 245);
  --purple: rgb(197 141 244);

  --background-color: var(--gray7);
  --hr-color: var(--gray1);
  --text-color: var(--text-color-primary);
  --text-color-primary: var(--gray1);
  --text-color-secondary: var(--gray4);
  --text-color-light: var(--gray5);
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Reverse the grayscale ramp in dark mode. */
    --gray7: rgb(17 19 28);
    --gray6: rgb(28 32 48);
    --gray5: rgb(53 59 82);
    --gray4: rgb(86 96 121);
    --gray3: rgb(139 144 164);
    --gray2: rgb(206 207 214);
    --gray1: rgb(255 253 249);
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

hr {
  border: 0;
  border-top: 1pt solid var(--hr-color);
  color: var(--hr-color);
}





/***********
 # GRADIENT
 ***********/

.text-color--gradient {
  background:
    radial-gradient(circle at 20% 70%, var(--purple), transparent 40%),
    radial-gradient(circle at 30% 30%, var(--light-blue), var(--blue) 20%, transparent 80%),
    radial-gradient(ellipse at 95% 20%, var(--dark-blue), var(--blue) 70%, transparent 80%),
    radial-gradient(circle at 100% 100%, var(--purple), var(--lilac) 100%),
    radial-gradient(circle at 45% 100%, var(--lilac), var(--purple) 60%),
    radial-gradient(ellipse at 50% 50%, var(--dark-blue), transparent 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  a[href] {
    color: inherit;
  }
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .text-color--gradient {
    --color1: rgb(103 128 229);
    --color2: rgb(130 90 227);
    --color3: rgb(135 101 228);
    --color4: rgb(125 115 229);
    --color5: rgb(107 130 230);
    --color6: rgb(77 153 232);
    --color7: rgb(74 136 230);
    --color8: rgb(71 128 228);
    --color9: rgb(65 80 224);
    --color10: rgb(61 58 223);

    span:nth-child(10n + 1) { color: var(--color1); }
    span:nth-child(10n + 2) { color: var(--color2); }
    span:nth-child(10n + 3) { color: var(--color3); }
    span:nth-child(10n + 4) { color: var(--color4); }
    span:nth-child(10n + 5) { color: var(--color5); }
    span:nth-child(10n + 6) { color: var(--color6); }
    span:nth-child(10n + 7) { color: var(--color7); }
    span:nth-child(10n + 8) { color: var(--color8); }
    span:nth-child(10n + 9) { color: var(--color9); }
    span:nth-child(10n)     { color: var(--color10); }
  }
}





/**********************
 # SYNTAX HIGHLIGHTING
 **********************/

.color-theme__dracula {
  --background: #282A36;
  --foreground: #f8f8f2;
  --selection: #44475A;
  --comment: #6272A4;
  --red: #ff5555;
  --orange: #ffB86C;
  --yellow: #F1FA8C;
  --green: #50FA7B;
  --purple: #BD93F9;
  --cyan: #8BE9FD;
  --pink: #FF79C6;
}


.codeblock {
  .err {
    color: var(--red);
  }

  /* line link */
  .lnlinks {
    outline: none;
    text-decoration: none;
    color: inherit;
  }

  .line {
    display: flex;
  }

  /* keyword */
  .k {
    color: var(--purple);
  }

  /* keyword: constant */
  /* keyword: declaration */
  /* keyword: pseudo */
  /* keyword: reserved */
  .kc, .kd, .kp, .kr {
    color: var(--orange);
  }

  /* keyword: namespace */
  .kn {
    color: var(--yellow);
  }

  /* keyword: type */
  .kt {
    color: var(--yellow);
    font-weight: bolder;
  }

  /* line highlight */
  .hl {
    background-color: var(--selection);
  }

  /* line numbers */
  .ln {
    white-space: pre;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: #7f7f7f;
  }

  /* NameAttribute */
  .na {
    color: #a6e22e;
  }

  /* NameClass */
  .nc {
    color: #a6e22e;
  }

  /* NameConstant */
  .no {
    color: #66d9ef;
  }

  /* name: decorator */
  .nd {
    color: #a6e22e;
  }

  /* name: exception */
  .ne {
    color: var(--green);
    font-weight: bolder;
  }

  /* NameFunction */
  .nf {
    color: var(--green);
  }

  /* NameOther */
  .nx {
    color: #a6e22e;
  }

  /* NameTag */
  .nt {
    color: #f92672;
  }

  /* Literal */
  .l {
    color: #ae81ff;
  }

  /* LiteralDate */
  .ld {
    color: #e6db74;
  }

  /* LiteralString */
  .s {
    color: #e6db74;
  }

  /* LiteralStringBacktick */
  .sb {
    color: #e6db74;
  }

  /* LiteralStringChar */
  .sc {
    color: #e6db74;
  }

  /* LiteralStringDelimiter */
  .dl {
    color: #e6db74;
  }

  /* LiteralNumberIntegerLong */
  .il {
    color: #ae81ff;
  }

  /* literal: number */
  /* literal: number, bin */
  /* literal: number, float */
  /* literal: number, hex */
  /* literal: number, integer */
  .m, .mb, .mf, .mh, .mi {
    color: var(--purple);
    font-weight: bolder;
  }

  /* LiteralNumberOct */
  .mo {
    color: #ae81ff;
  }

  /* name: built-in */
  .nb {
    color: var(--green);
  }

  /* Operator */
  .o {
    color: var(--orange);
  }

  /* OperatorWord */
  .ow {
    color: #f92672;
  }

  /* LiteralStringDoc */
  .sd {
    color: #e6db74;
  }

  /* LiteralStringDouble */
  .s2 {
    color: #e6db74;
  }

  /* LiteralStringEscape */
  .se {
    color: #ae81ff;
  }

  /* LiteralStringHeredoc */
  .sh {
    color: #e6db74;
  }

  /* LiteralStringInterpol */
  .si {
    color: #e6db74;
  }

  /* LiteralStringOther */
  .sx {
    color: #e6db74;
  }

  /* literal: string, regex */
  .sr {
    color: var(--green);
  }

  /* literal: string, affix */
  /* literal: string, single */
  /* literal: string, symbol */
  .sa, .s1, .ss {
    color: var(--yellow);
  }

  /* comment */
  /* comment: hashbang */
  /* comment: multiline */
  /* comment: single */
  /* comment: special */
  /* comment: preproc */
  /* comment: preproc file */
  .c, .ch, .cm, .c1, .cs, .cp, .cpf {
    color: #75715e;
  }

  /* GenericDeleted */
  .gd {
    color: #f92672;
  }

  /* GenericEmph */
  .ge {
    font-style: italic;
  }

  /* GenericInserted */
  .gi {
    color: #a6e22e;
  }

  /* GenericStrong */
  .gs {
    font-weight: bold;
  }

  /* GenericSubheading */
  .gu {
    color: #75715e;
  }
}