/* cspell:words projectnumber, navelem, tablehead, keywordflow, keywordtype */

@font-face {
  font-family: "Fredoka";
  src:
    url("Fredoka.ttf") format("truetype-variations"),
    url("Fredoka.ttf") format("truetype");
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrainsMono";
  src:
    url("JetBrainsMono.ttf") format("truetype-variations"),
    url("JetBrainsMono.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

html {
  --font-family:
    "Fredoka", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  --font-family-monospace:
    "JetBrainsMono", ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
    Liberation Mono, monospace;
}

#powerTip {
  color: var(--page-foreground-color);
  background-color: var(--page-background-color);
  border: 1px solid var(--separator-color);
}

html {
  --primary-color: var(--ctp-latte-teal);
  --primary-dark-color: var(--ctp-latte-teal);
  --primary-light-color: var(--ctp-latte-teal);
  --on-primary-color: var(--ctp-latte-base);

  --box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
  --odd-color: rgba(100, 100, 100, 0.06);
  --menu-selected-background: rgba(0, 0, 0, 0.4);
  --page-background-color: var(--ctp-latte-base);
  --page-foreground-color: var(--ctp-latte-text);
  --page-secondary-foreground-color: var(--ctp-latte-subtext1);
  --separator-color: var(--ctp-latte-overlay0);

  --side-nav-background: var(--ctp-latte-mantle);
  --code-background: var(--ctp-latte-base);

  --tablehead-background: var(--ctp-latte-surface0);

  --blockquote-background: var(--ctp-latte-base);
  --blockquote-foreground: var(--ctp-latte-subtext1);

  --warning-color: hsl(from var(--ctp-latte-yellow) h s 85%);
  --warning-color-dark: var(--ctp-latte-yellow);
  --warning-color-darker: hsl(from var(--ctp-latte-yellow) h s 15%);

  --note-color: hsl(from var(--ctp-latte-blue) h s 85%);
  --note-color-dark: var(--ctp-latte-blue);
  --note-color-darker: hsl(from var(--ctp-latte-blue) h s 15%);

  --todo-color: hsl(from var(--ctp-latte-mauve) h s 85%);
  --todo-color-dark: var(--ctp-latte-mauve);
  --todo-color-darker: hsl(from var(--ctp-latte-mauve) h s 15%);

  --deprecated-color: var(--ctp-latte-surface1);
  --deprecated-color-dark: var(--ctp-latte-surface2);
  --deprecated-color-darker: var(--ctp-latte-overlay1);

  --bug-color: hsl(from var(--ctp-latte-red) h s 85%);
  --bug-color-dark: var(--ctp-latte-red);
  --bug-color-darker: hsl(from var(--ctp-latte-red) h s 15%);

  --invariant-color: hsl(from var(--ctp-latte-green) h s 85%);
  --invariant-color-dark: var(--ctp-latte-green);
  --invariant-color-darker: hsl(from var(--ctp-latte-green) h s 15%);

  --fragment-background: var(--ctp-latte-base);
  --fragment-foreground: var(--ctp-latte-text);
  --fragment-keyword: var(--ctp-latte-pink);
  --fragment-keywordtype: var(--ctp-latte-mauve);
  --fragment-keywordflow: var(--ctp-latte-peach);
  --fragment-token: var(--ctp-latte-green);
  --fragment-comment: var(--ctp-latte-subtext1);
  --fragment-link: var(--ctp-latte-blue);
  --fragment-preprocessor: var(--ctp-latte-teal);
  --fragment-linenumber-color: var(--ctp-latte-subtext1);
  --fragment-linenumber-background: var(--ctp-latte-surface0);
  --fragment-linenumber-border: var(--ctp-latte-overlay0);
}

html.dark-mode {
  color-scheme: dark;

  --primary-color: var(--ctp-mocha-teal);
  --primary-dark-color: var(--ctp-mocha-teal);
  --primary-light-color: var(--ctp-mocha-teal);

  --box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
  --odd-color: rgba(100, 100, 100, 0.06);
  --menu-selected-background: rgba(0, 0, 0, 0.4);
  --page-background-color: var(--ctp-mocha-base);
  --page-foreground-color: var(--ctp-mocha-text);
  --page-secondary-foreground-color: var(--ctp-mocha-subtext1);
  --separator-color: var(--ctp-mocha-overlay0);

  --side-nav-background: var(--ctp-mocha-mantle);
  --code-background: var(--ctp-mocha-base);

  --tablehead-background: var(--ctp-mocha-surface0);

  --blockquote-background: var(--ctp-mocha-base);
  --blockquote-foreground: var(--ctp-mocha-subtext1);

  --warning-color: hsl(from var(--ctp-mocha-yellow) h s 15%);
  --warning-color-dark: var(--ctp-mocha-yellow);
  --warning-color-darker: hsl(from var(--ctp-mocha-yellow) h s 85%);

  --note-color: hsl(from var(--ctp-mocha-blue) h s 15%);
  --note-color-dark: var(--ctp-mocha-blue);
  --note-color-darker: hsl(from var(--ctp-mocha-blue) h s 85%);

  --todo-color: hsl(from var(--ctp-mocha-mauve) h s 15%);
  --todo-color-dark: var(--ctp-mocha-mauve);
  --todo-color-darker: hsl(from var(--ctp-mocha-mauve) h s 85%);

  --deprecated-color: var(--ctp-mocha-surface1);
  --deprecated-color-dark: var(--ctp-mocha-surface2);
  --deprecated-color-darker: var(--ctp-mocha-overlay1);

  --bug-color: hsl(from var(--ctp-mocha-red) h s 15%);
  --bug-color-dark: var(--ctp-mocha-red);
  --bug-color-darker: hsl(from var(--ctp-mocha-red) h s 85%);

  --invariant-color: hsl(from var(--ctp-mocha-green) h s 15%);
  --invariant-color-dark: var(--ctp-mocha-green);
  --invariant-color-darker: hsl(from var(--ctp-mocha-green) h s 85%);

  --fragment-background: var(--ctp-mocha-base);
  --fragment-foreground: var(--ctp-mocha-text);
  --fragment-keyword: var(--ctp-mocha-pink);
  --fragment-keywordtype: var(--ctp-mocha-mauve);
  --fragment-keywordflow: var(--ctp-mocha-peach);
  --fragment-token: var(--ctp-mocha-green);
  --fragment-comment: var(--ctp-mocha-subtext1);
  --fragment-link: var(--ctp-mocha-blue);
  --fragment-preprocessor: var(--ctp-mocha-teal);
  --fragment-linenumber-color: var(--ctp-mocha-subtext1);
  --fragment-linenumber-background: var(--ctp-mocha-surface0);
  --fragment-linenumber-border: var(--ctp-mocha-overlay0);
}

.github-corner svg {
  fill: var(--primary-light-color);
  color: var(--page-background-color);
  width: 72px;
  height: 72px;
}

html {
  dl dd span.tt {
    border: none;
  }

  dl.warning dd span.tt,
  dl.attention dd span.tt {
    background-color: var(--warning-color-dark);
    color: var(--warning-color);
  }

  dl.note dd span.tt,
  dl.remark dd span.tt {
    background-color: var(--note-color-dark);
    color: var(--note-color);
  }

  dl.important dd span.tt {
    background-color: var(--bug-color-dark);
    color: var(--bug-color);
  }
}

dl.important {
  background: var(--bug-color);
  border-left: 8px solid var(--bug-color-dark);
  color: var(--bug-color-darker);
}

dl.important dt {
  color: var(--bug-color-dark);
}

@media screen and (max-width: 767px) {
  .github-corner svg {
    width: 50px;
    height: 50px;
  }
  #projectnumber {
    margin-right: 22px;
  }
}

.title_screenshot {
  filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.22));
  max-width: 500px;
  margin: var(--spacing-large) 0;
}

.title_screenshot .caption {
  display: none;
}

#theme-selection {
  position: fixed;
  bottom: 0;
  left: 0;
  background: var(--side-nav-background);
  padding: 5px 2px 5px 8px;
  box-shadow: 0 -4px 4px -2px var(--side-nav-background);
  display: flex;
}

#theme-selection label {
  border: 1px solid var(--separator-color);
  border-right: 0;
  color: var(--page-foreground-color);
  font-size: var(--toc-font-size);
  padding: 0 8px;
  display: inline-block;
  height: 22px;
  box-sizing: border-box;
  border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
  line-height: 20px;
  background: var(--page-background-color);
  opacity: 0.7;
}

@media (prefers-color-scheme: dark) {
  html:not(.light-mode) #theme-select {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23aaaaaa'><polygon points='0,0 100,0 50,50'/></svg>")
      no-repeat;
    background-size: 8px;
    background-position: calc(100% - 6px) 65%;
    background-color: var(--page-background-color);
  }
}

html.dark-mode #theme-select {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23aaaaaa'><polygon points='0,0 100,0 50,50'/></svg>")
    no-repeat;
  background-size: 8px;
  background-position: calc(100% - 6px) 65%;
  background-color: var(--page-background-color);
}

#theme-select {
  border: 1px solid var(--separator-color);
  border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
  padding: 0;
  height: 22px;
  font-size: var(--toc-font-size);
  font-family: var(--font-family);
  width: 215px;
  color: var(--primary-color);
  border-left: 0;
  display: inline-block;
  opacity: 0.7;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23888888'><polygon points='0,0 100,0 50,50'/></svg>")
    no-repeat;
  background-size: 8px;
  background-position: calc(100% - 6px) 65%;
  background-repeat: no-repeat;
  background-color: var(--page-background-color);
}

#theme-selection:hover #theme-select,
#theme-selection:hover label {
  opacity: 1;
}

#nav-tree-contents {
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  #theme-selection {
    box-shadow: none;
    background: none;
    height: 20px;
  }

  #theme-select {
    width: 80px;
    opacity: 1;
  }

  #theme-selection label {
    opacity: 1;
  }

  #nav-path ul li.navelem:first-child {
    margin-left: 160px;
  }

  ul li.footer:not(:first-child) {
    display: none;
  }

  #nav-path {
    position: fixed;
    bottom: 0;
    background: var(--page-background-color);
  }
}

:root {
  --ctp-latte-rosewater: #dc8a78;
  --ctp-latte-flamingo: #dd7878;
  --ctp-latte-pink: #ea76cb;
  --ctp-latte-mauve: #8839ef;
  --ctp-latte-red: #d20f39;
  --ctp-latte-maroon: #e64553;
  --ctp-latte-peach: #fe640b;
  --ctp-latte-yellow: #df8e1d;
  --ctp-latte-green: #40a02b;
  --ctp-latte-teal: #179299;
  --ctp-latte-sky: #04a5e5;
  --ctp-latte-sapphire: #209fb5;
  --ctp-latte-blue: #1e66f5;
  --ctp-latte-lavender: #7287fd;
  --ctp-latte-text: #4c4f69;
  --ctp-latte-subtext1: #5c5f77;
  --ctp-latte-subtext0: #6c6f85;
  --ctp-latte-overlay2: #7c7f93;
  --ctp-latte-overlay1: #8c8fa1;
  --ctp-latte-overlay0: #9ca0b0;
  --ctp-latte-surface2: #acb0be;
  --ctp-latte-surface1: #bcc0cc;
  --ctp-latte-surface0: #ccd0da;
  --ctp-latte-base: #eff1f5;
  --ctp-latte-mantle: #e6e9ef;
  --ctp-latte-crust: #dce0e8;
}

:root {
  --ctp-mocha-rosewater: #f5e0dc;
  --ctp-mocha-flamingo: #f2cdcd;
  --ctp-mocha-pink: #f5c2e7;
  --ctp-mocha-mauve: #cba6f7;
  --ctp-mocha-red: #f38ba8;
  --ctp-mocha-maroon: #eba0ac;
  --ctp-mocha-peach: #fab387;
  --ctp-mocha-yellow: #f9e2af;
  --ctp-mocha-green: #a6e3a1;
  --ctp-mocha-teal: #94e2d5;
  --ctp-mocha-sky: #89dceb;
  --ctp-mocha-sapphire: #74c7ec;
  --ctp-mocha-blue: #89b4fa;
  --ctp-mocha-lavender: #b4befe;
  --ctp-mocha-text: #cdd6f4;
  --ctp-mocha-subtext1: #bac2de;
  --ctp-mocha-subtext0: #a6adc8;
  --ctp-mocha-overlay2: #9399b2;
  --ctp-mocha-overlay1: #7f849c;
  --ctp-mocha-overlay0: #6c7086;
  --ctp-mocha-surface2: #585b70;
  --ctp-mocha-surface1: #45475a;
  --ctp-mocha-surface0: #313244;
  --ctp-mocha-base: #1e1e2e;
  --ctp-mocha-mantle: #181825;
  --ctp-mocha-crust: #11111b;
}