:root {
  --font-base: Inter, Inter-fallback, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans",
    Arial, sans-serif;
  --font-display: Inter, Inter-fallback, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans",
    Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
    "DejaVu Sans Mono", monospace;
  --bg-primary: #fafafa; /* gray-50 */
  --bg-secondary: #e4e4e7; /* gray-200 */
  --text-primary: #475569;
  --text-secondary: #1e293b;
  --color-primary: #855cdd;
  --color-links: #01778b;
}
@supports (font-variation-settings: normal) {
  :root {
    --font-base: "Inter var", Inter-fallback, Roboto, "Helvetica Neue", "Arial Nova",
      "Nimbus Sans", Arial, sans-serif;
    --font-display: "Inter var", Inter-fallback, Roboto, "Helvetica Neue", "Arial Nova",
      "Nimbus Sans", Arial, sans-serif;
  }
}

@font-face {
  font-family: Inter-fallback;
  ascent-override: 100%;
  descent-override: 20%;
  line-gap-override: 0%;
  advance-override: 0;
  src: local(Arial);
}

@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url("/assets/fonts/Inter.var-subset.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  font-named-instance: 'Italic';
  src: url("/assets/fonts/Inter-italic.var-subset.woff2") format("woff2");
} 

@font-face {
  font-family: Inter-fallback;
  ascent-override: 100%;
  descent-override: 20%;
  line-gap-override: 0%;
  advance-override: 0;
  src: local(Arial);
}

.dark {
  --bg-primary: #1c232e;
  --bg-secondary: #111827; /* coolGray-900 */
  --text-primary: #d4cece;
  --text-secondary: #e9e1e1;
  --color-primary: #855cdd;
  --color-links: #7ecbd7;
}

@media (prefers-reduced-motion) {
  html {
    scroll-behavior: auto !important;
  }
}

html {
  background-color: var(--bg-primary);
}

html,
body {
  min-height: 100vh;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  color: var(--text-primary);
  font-family: var(--font-base);
  font-synthesis: none;
}

html.dark,
html.dark #expansible-menu,
html.dark #main-header {
  background: radial-gradient(
    circle,
    rgba(28, 35, 46, 1) 0%,
    rgba(28, 35, 46, 1) 30%,
    rgba(17, 24, 35, 1) 110%
  );
  background-attachment: fixed;
}

html.dark #expansible-menu {
  background-position: top -4.5rem;
}

@-moz-document url-prefix() {
  html.dark,
  html.dark #expansible-menu,
  html.dark #expansible-menu,
  html.dark #main-header {
    background: var(--bg-primary);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
}

[id] {
  scroll-margin-top: 100px;
}

@keyframes swing {
  0% {
    background-position: 100% center;
    animation-timing-function: ease-in;
  }
  22% {
    background-position: -20.5% center;
    aanimation-timing-function: ease-out;
  }
  48% {
    background-position: 25% center;
    animationtimingfunction: ease-in;
  }
  59% {
    background-position: -29.5% center;
    animation-timing-function: ease-out;
  }
}

code[class*="language-"],
pre[class*="language-"] {
  text-align: left;
  white-space: pre-wrap;
  word-spacing: normal;
  word-break: break-word;
  word-wrap: normal;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;

  box-shadow: rgb(0 2 4 / 20%) 0px 5px 20px -10px;
  filter: contrast(1.05);
}

code[class*="language-"]::-webkit-scrollbar-track,
pre[class*="language-"]::-webkit-scrollbar-track {
  border-radius: 0.375rem;
}

code[class*="language-"]::-webkit-scrollbar,
pre[class*="language-"]::-webkit-scrollbar {
  border-radius: 0.375rem;
}

code[class*="language-"]::-webkit-scrollbar-thumb,
pre[class*="language-"]::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  border: 5px solid white;
  background-color: #cccccf;
}

pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: #e4e4e7;
}

pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
  text-shadow: none;
  background: #e4e4e7;
}

.remark-highlight-code-line {
  background-color: #ebebef;
  display: block;
  margin-right: -1em;
  margin-left: -1em;
  padding-right: 1em;
  padding-left: 1em;
}

@media print {
  code[class*="language-"],
  pre[class*="language-"] {
    text-shadow: none;
  }
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  color: #24292f;
  background: #ffffff;
}

.namespace {
  opacity: 0.7;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #999988;
  font-style: italic;
}

.token.string,
.token.attr-value {
  color: #e3116c;
}

.token.punctuation,
.token.operator {
  color: #393a34;
}

.token.entity,
.token.url,
.token.symbol,
.token.number,
.token.boolean,
.token.variable,
.token.constant,
.token.property,
.token.regex,
.token.inserted {
  color: #36acaa;
}

.token.atrule,
.token.attr-name {
  color: #00a4db;
}

.token.function,
.token.deleted {
  color: #d73a49;
}

.token.function-variable {
  color: #6f42c1;
}

.token.tag,
.token.selector,
.token.keyword {
  color: #00009f;
}

.token.important,
.token.bold {
  font-weight: bold;
}
.token.italic {
  font-style: italic;
}

/*
Dark theme
*/
.dark :not(pre) > code[class*="language-"],
.dark pre[class*="language-"] {
  color: white;
  background: #011627;

  box-shadow: unset;
  filter: unset;
}

.dark code[class*="language-"]::-webkit-scrollbar-thumb,
.dark pre[class*="language-"]::-webkit-scrollbar-thumb {
  background-color: rgb(50, 62, 80);
  border: 5px solid rgba(1, 22, 39, 40);
}

.dark pre[class*="language-"]::-moz-selection,
.dark pre[class*="language-"] ::-moz-selection,
.dark code[class*="language-"]::-moz-selection,
.dark code[class*="language-"] ::-moz-selection {
  background: rgba(29, 59, 83, 0.99);
}

.dark pre[class*="language-"]::selection,
.dark pre[class*="language-"] ::selection,
.dark code[class*="language-"]::selection,
.dark code[class*="language-"] ::selection {
  background: rgba(29, 59, 83, 0.99);
}

.dark .remark-highlight-code-line {
  background-color: rgba(53, 59, 69, 0.6);
}

.dark .namespace {
  color: rgb(178, 204, 214);
}

.dark .comment,
.dark .prolog,
.dark .cdata {
  color: rgb(147, 165, 165);
  font-style: italic;
}

.dark .punctuation {
  color: rgb(199, 146, 234);
}

.dark .deleted {
  color: rgba(239, 83, 80, 0.56);
  font-style: italic;
}

.dark .symbol,
.dark .property {
  color: rgb(128, 203, 196);
}

.dark .tag,
.dark .operator,
.dark .keyword {
  color: rgb(127, 219, 202);
}

.dark .boolean {
  color: rgb(255, 88, 116);
}

.dark .number {
  color: rgb(247, 140, 108);
}

.dark .constant,
.dark .function,
.dark .builtin,
.dark .char {
  color: rgb(130, 170, 255);
}

.dark .selector,
.dark .doctype {
  color: rgb(199, 146, 234);
  font-style: italic;
}

.dark .attr-name,
.dark .inserted {
  color: rgb(173, 219, 103);
  font-style: italic;
}

.dark .string,
.dark .url,
.dark .entity,
.language-css .dark .string,
.style .dark .string {
  color: rgb(173, 219, 103);
}

.dark .class-name,
.dark .atrule,
.dark .attr-value {
  color: rgb(255, 203, 139);
}

.dark .regex,
.dark .important,
.dark .variable {
  color: rgb(214, 222, 235);
}

.dark .important,
.dark .bold {
  font-weight: bold;
}

.dark .italic {
  font-style: italic;
}