/* @theme cybertopia */

@import 'uncover';

/* Background */
:root.invert {
  --noraj: #02c797;
  --color-background: #000000;
  --color-background-code: #101010;
  --color-background-paginate: rgba(2, 199, 151, 0.05);
  --color-foreground: #ffffff;
  --color-highlight: var(--noraj);
  --color-highlight-hover: color-mix(#ffffff, var(--noraj), 25%);
  --color-highlight-heading: color-mix(var(--color-background), var(--noraj), 20%);
  --color-header: rgba(255, 255, 255, 0.4);
  --color-header-shadow: rgba(0, 0, 0, 0.8);
  /* highlight.js colors - Cybertopia Saturated theme - https://github.com/noraj/cybertopia-highlightjs */
  --hljs-bg: #101010;
  --hljs-mono-1: #abb2bf;
  --hljs-mono-3: #5c6370;
  --hljs-hue-1: #5AF202;
  --hljs-hue-2: #08B7FD;
  --hljs-hue-3: #E917FD;
  --hljs-hue-4: #02c797;
  --hljs-hue-5: #E30202;
  --hljs-hue-6: #FD9926;
  --hljs-hue-6-2: #ffea00;
  --hljs-hue-7: #35FD56;

  /* xo background */
  background: radial-gradient(circle at top left,transparent 9%, var(--color-background-code) 10% ,var(--color-background-code) 15% , transparent 16%) , radial-gradient(circle at bottom left,transparent 9%, var(--color-background-code) 10% ,var(--color-background-code) 15% , transparent 16%), radial-gradient(circle at top right ,transparent 9%, var(--color-background-code) 10% ,var(--color-background-code) 15% , transparent 16%) , radial-gradient(circle at bottom right,transparent 9%, var(--color-background-code) 10% ,var(--color-background-code) 15% , transparent 16%),radial-gradient(circle, transparent 25%, var(--color-background) 26%),linear-gradient(45deg, transparent 46%, var(--color-background-code) 47%, var(--color-background-code) 52%, transparent 53%), linear-gradient(135deg, transparent 46%, var(--color-background-code) 47%, var(--color-background-code) 52%, transparent 53%);
  background-size: 3em 3em;
  background-color: var(--color-background);
}

/* Titles */
:root.invert h1,h2,h3,h4,h5,h6 {
  color: #ffffff;
  backdrop-filter: blur(8px);
  border: 5px solid var(--noraj);
}

/* Capitalize sub-titles */
:root.invert h2,h3 {
  text-transform: capitalize;
}

/* Links */
:root.invert a {
  color: var(--noraj);
}

/* Unordered lists */
:root ul, :root.invert ul {
  list-style-type: none;
  backdrop-filter: blur(20px);
}

:root ul li::before, :root.invert ul li::before {
  content: "\2688";
  color: var(--noraj);
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

/* Ordered lists */
:root ol, :root.invert ol {
  list-style: none;
  backdrop-filter: blur(20px);
  counter-reset: li;
}

:root li, :root.invert li {
  counter-increment: li;
}

:root ol li::before, :root.invert ol li::before {
  content: counter(li) '.';
  color: var(--noraj);
  display: inline-block;
  width: 1.2em;
  margin-left: -1em;
}

/* All texts */
:root p:only-child , :root.invert p:only-child {
  backdrop-filter: blur(20px);
}

/* Header & Footer */
:root header, :root.invert header {
  color: #c6c6c6;
}
:root footer, :root.invert footer {
  color:#c6c6c6;
  backdrop-filter: blur(20px);
}

/* Pagination */
section::after {
  color: var(--noraj);
}

/* highlight.js support - Cybertopia Saturated theme - https://github.com/noraj/cybertopia-highlightjs */
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em
}
code.hljs {
  padding: 3px 5px
}
.hljs {
  color: var(--hljs-mono-1);
  background: var(--hljs-bg)
}
.hljs-comment,
.hljs-quote {
  color: var(--hljs-mono-3);
  font-style: italic
}
.hljs-doctag,
.hljs-keyword,
.hljs-formula {
  color: var(--hljs-hue-3)
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
  color: var(--hljs-hue-5)
}
.hljs-literal {
  color: var(--hljs-hue-1)
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string {
  color: var(--hljs-hue-4)
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number,
.hljs-punctuation {
  color: var(--hljs-hue-6)
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title,
.hljs-property,
.hljs-tag {
  color: var(--hljs-hue-2)
}
.hljs-built_in,
.hljs-title.class_,
.hljs-class .hljs-title {
  color: var(--hljs-hue-6-2)
}
.hljs-emphasis {
  font-style: italic
}
.hljs-strong {
  font-weight: bold
}
.hljs-link {
  text-decoration: underline
}
.hljs-params, .hljs-operator {
  color: var(--hljs-hue-7)
}