@font-face {
    font-family: 'Cantarell';
    src: url('./Cantarell-VF.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('./JetBrainsMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* PrismJS 1.30.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+applescript+bash+batch+powershell&plugins=toolbar+copy-to-clipboard */
/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

 :root {
	/* Base Colors */
	--color-text: rgb(212, 212, 212);
	--color-bg: rgb(30, 30, 30);
	--color-selection-bg: rgb(38, 79, 120);
	
	/* Syntax Highlighting Colors */
	--color-blue: rgb(86, 156, 214);
	--color-light-blue: rgb(156, 220, 254);
	--color-green: rgb(110, 153, 85);
	--color-light-green: rgb(181, 206, 168);
	--color-orange: rgb(206, 145, 120);
	--color-purple: rgb(197, 134, 192);
	--color-yellow: rgb(220, 220, 170);
	--color-red: rgb(209, 105, 105);
	--color-teal: rgb(78, 201, 176);
	--color-gold: rgb(215, 186, 125);
	--color-gray: rgb(128, 128, 128);
	
	/* UI Colors */
	--color-line-highlight-bg: rgb(247, 235, 198);
	--color-line-highlight-border: rgb(247, 216, 124);
	--color-toolbar-text: rgb(50, 205, 50); /* limegreen */
	--color-toolbar-hover: rgb(255, 255, 0); /* yellow */
	--color-toolbar-bg: rgba(0, 0, 0, 0.5);
	--color-toolbar-shadow: rgba(0, 0, 0, 0.2);
  }

  .dark-mode {
	/* Base Colors */
	--color-text: rgb(212, 212, 212);
	--color-bg: rgb(30, 30, 30);
	--color-selection-bg: rgb(38, 79, 120);
	
	/* Syntax Highlighting Colors */
	--color-blue: rgb(86, 156, 214);
	--color-light-blue: rgb(156, 220, 254);
	--color-green: rgb(110, 153, 85);
	--color-light-green: rgb(181, 206, 168);
	--color-orange: rgb(206, 145, 120);
	--color-purple: rgb(197, 134, 192);
	--color-yellow: rgb(220, 220, 170);
	--color-red: rgb(209, 105, 105);
	--color-teal: rgb(78, 201, 176);
	--color-gold: rgb(215, 186, 125);
	--color-gray: rgb(128, 128, 128);
	
	/* UI Colors */
	--color-line-highlight-bg: rgb(247, 235, 198);
	--color-line-highlight-border: rgb(247, 216, 124);
	--color-toolbar-text: rgb(50, 205, 50);
	--color-toolbar-hover: rgb(255, 255, 0); 
	--color-toolbar-bg: rgba(0, 0, 0, 0.5);
	--color-toolbar-shadow: rgba(0, 0, 0, 0.2);
  }

  .light-mode {
	/* Base Colors */
	--color-text: rgb(43, 43, 43);
	--color-bg: rgb(225, 225, 225);
	--color-selection-bg: rgb(200, 150, 100);
	
	/* Syntax Highlighting Colors */
	--color-blue: rgb(0, 100, 200);
	--color-light-blue: rgb(0, 150, 255);
	--color-green: rgb(100, 50, 200);
	--color-light-green: rgb(80, 40, 180);
	--color-orange: rgb(0, 120, 150);
	--color-purple: rgb(100, 0, 150);
	--color-yellow: rgb(0, 0, 150);
	--color-red: rgb(200, 50, 50);
	--color-teal: rgb(200, 0, 100);
	--color-gold: rgb(0, 80, 180);
	--color-gray: rgb(127, 127, 127);
	
	/* UI Colors */
	--color-line-highlight-bg: rgb(210, 230, 255);
	--color-line-highlight-border: rgb(180, 200, 255);
	--color-toolbar-text: rgb(200, 0, 200);
	--color-toolbar-hover: rgb(0, 0, 200);
	--color-toolbar-bg: rgba(255, 255, 255, 0.7);
	--color-toolbar-shadow: rgba(200, 200, 200, 0.3);
  }
  
  pre[class*="language-"],
  code[class*="language-"] {
	color: var(--color-text);
	text-shadow: none;
	font-family: 'JetBrains Mono', Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	line-height: 1.5;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
  }
  
  pre[class*="language-"]::selection,
  code[class*="language-"]::selection,
  pre[class*="language-"] *::selection,
  code[class*="language-"] *::selection {
	text-shadow: none;
	background: var(--color-selection-bg);
  }
  
  @media print {
	pre[class*="language-"],
	code[class*="language-"] {
	  text-shadow: none;
	}
  }
  
  pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	background: var(--color-bg);
  }
  
  :not(pre) > code[class*="language-"] {
	background: var(--color-bg);
	border-radius: 4px;
	padding: 2px;
  }
  
  /*********************************************************
  * Tokens
  */
  .namespace {
	opacity: .7;
  }
  
  .token.doctype .token.doctype-tag {
	color: var(--color-blue);
  }
  
  .token.doctype .token.name {
	color: var(--color-light-blue);
  }
  
  .token.comment,
  .token.prolog {
	color: var(--color-green);
  }
  
  .token.punctuation,
  .language-html .language-css .token.punctuation,
  .language-html .language-javascript .token.punctuation {
	color: var(--color-text);
  }
  
  .token.property,
  .token.tag,
  .token.boolean,
  .token.number,
  .token.constant,
  .token.symbol,
  .token.inserted,
  .token.unit {
	color: var(--color-light-green);
  }
  
  .token.selector,
  .token.attr-name,
  .token.string,
  .token.char,
  .token.builtin,
  .token.deleted {
	color: var(--color-orange);
  }
  
  .language-css .token.string.url {
	text-decoration: underline;
  }
  
  .token.operator,
  .token.entity {
	color: var(--color-text);
  }
  
  .token.operator.arrow {
	color: var(--color-blue);
  }
  
  .token.atrule {
	color: var(--color-orange);
  }
  
  .token.atrule .token.rule {
	color: var(--color-purple);
  }
  
  .token.atrule .token.url {
	color: var(--color-light-blue);
  }
  
  .token.atrule .token.url .token.function {
	color: var(--color-yellow);
  }
  
  .token.atrule .token.url .token.punctuation {
	color: var(--color-text);
  }
  
  .token.keyword {
	color: var(--color-blue);
  }
  
  .token.keyword.module,
  .token.keyword.control-flow {
	color: var(--color-purple);
  }
  
  .token.function,
  .token.function .token.maybe-class-name {
	color: var(--color-yellow);
  }
  
  .token.regex {
	color: var(--color-red);
  }
  
  .token.important {
	color: var(--color-blue);
  }
  
  .token.italic {
	font-style: italic;
  }
  
  .token.constant {
	color: var(--color-light-blue);
  }
  
  .token.class-name,
  .token.maybe-class-name {
	color: var(--color-teal);
  }
  
  .token.console {
	color: var(--color-light-blue);
  }
  
  .token.parameter {
	color: var(--color-light-blue);
  }
  
  .token.interpolation {
	color: var(--color-light-blue);
  }
  
  .token.punctuation.interpolation-punctuation {
	color: var(--color-blue);
  }
  
  .token.boolean {
	color: var(--color-blue);
  }
  
  .token.property,
  .token.variable,
  .token.imports .token.maybe-class-name,
  .token.exports .token.maybe-class-name {
	color: var(--color-light-blue);
  }
  
  .token.selector {
	color: var(--color-gold);
  }
  
  .token.escape {
	color: var(--color-gold);
  }
  
  .token.tag {
	color: var(--color-blue);
  }
  
  .token.tag .token.punctuation {
	color: var(--color-gray);
  }
  
  .token.cdata {
	color: var(--color-gray);
  }
  
  .token.attr-name {
	color: var(--color-light-blue);
  }
  
  .token.attr-value,
  .token.attr-value .token.punctuation {
	color: var(--color-orange);
  }
  
  .token.attr-value .token.punctuation.attr-equals {
	color: var(--color-text);
  }
  
  .token.entity {
	color: var(--color-blue);
  }
  
  .token.namespace {
	color: var(--color-teal);
  }
  
  /*********************************************************
  * Language Specific
  */
  pre[class*="language-javascript"],
  code[class*="language-javascript"],
  pre[class*="language-jsx"],
  code[class*="language-jsx"],
  pre[class*="language-typescript"],
  code[class*="language-typescript"],
  pre[class*="language-tsx"],
  code[class*="language-tsx"] {
	color: var(--color-light-blue);
  }
  
  pre[class*="language-css"],
  code[class*="language-css"] {
	color: var(--color-orange);
  }
  
  pre[class*="language-html"],
  code[class*="language-html"] {
	color: var(--color-text);
  }
  
  .language-regex .token.anchor {
	color: var(--color-yellow);
  }
  
  .language-html .token.punctuation {
	color: var(--color-gray);
  }
  
  /*********************************************************
  * Line highlighting
  */
  pre[class*="language-"] > code[class*="language-"] {
	position: relative;
	z-index: 1;
  }
  
  .line-highlight.line-highlight {
	background: var(--color-line-highlight-bg);
	box-shadow: inset 5px 0 0 var(--color-line-highlight-border);
	z-index: 0;
  }
  
  div.code-toolbar {
	position: relative;
  }
  
  div.code-toolbar > .toolbar {
	position: absolute;
	z-index: 10;
	top: .5em;
	right: .75em;
	transition: opacity 0.5s ease-in-out;
	opacity: .5;
  }
  
  div.code-toolbar:hover > .toolbar {
	opacity: 1;
  }
  
  div.code-toolbar:focus-within > .toolbar {
	opacity: 1;
  }
  
  div.code-toolbar > .toolbar > .toolbar-item {
	display: inline-block;
  }
  
  div.code-toolbar > .toolbar > .toolbar-item > a {
	cursor: pointer;
  }
  
  div.code-toolbar > .toolbar > .toolbar-item > button {
	font-family: 'JetBrains Mono', Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
	height: 2.5em;
	cursor: pointer;
	color: var(--color-toolbar-text);
	border: 3px dotted var(--color-toolbar-text);
	line-height: normal;
	overflow: visible;
	padding: 5;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
  }
  
  div.code-toolbar > .toolbar > .toolbar-item > a,
  div.code-toolbar > .toolbar > .toolbar-item > button,
  div.code-toolbar > .toolbar > .toolbar-item > span {
	font-size: 1em;
	padding: 0 .5em;
	background: var(--color-toolbar-bg);
	box-shadow: 0 2px 0 0 var(--color-toolbar-shadow);
	border-radius: .5em;
  }
  
  div.code-toolbar > .toolbar > .toolbar-item > a:hover,
  div.code-toolbar > .toolbar > .toolbar-item > a:focus,
  div.code-toolbar > .toolbar > .toolbar-item > button:hover,
  div.code-toolbar > .toolbar > .toolbar-item > button:focus,
  div.code-toolbar > .toolbar > .toolbar-item > span:hover,
  div.code-toolbar > .toolbar > .toolbar-item > span:focus {
	color: var(--color-toolbar-hover);
	text-decoration: underline dotted;
  }