@font-face {
  font-family: Pointfree;
  src: url("/f/Pointfree-Regular.woff2") format("woff2");
}

h1, h2, h3, h4, h5, h6 {
  color: #fdfdfd;
}

body {
  background-color: #131418;
  color: #cfcfcf;
  font-style: normal;
  font-family: Pointfree, monospace;
  font-size: 14px;
  margin: 2em;
  display: grid;
  justify-content: center;
}

.center {
  text-align: center;
}

hr {
  color: #3f3f3f;
}

footer, header, main {
  margin: 2em 0 0 0;
  max-width: 50em;
}

a, a:focus, a:target, a:visited {
  color: #fdfdfd;
  text-decoration: none;
  border-bottom: solid 1px #3f3f3f;
}

button, input, input:focus, textarea, textarea:focus {
  color: #cfcfcf;
  background-color: #2f2f2f;
  border: 2px solid #121316;
  border-radius: 5px;
  margin: 2px;
}

.card {
  background-color: #2f2f2f;
  border: 2px solid #121316;
  padding: .5em;
  border-radius: 5px;
}

:root {
  --bold-modifier: 200;
  --line-height-tight: 1.3;
  --callout-border-width: 0px;
  --callout-border-opacity: 0.25;
  --callout-padding: 12px 12px 12px 24px;
  --callout-radius: 4px;
  --callout-title-color: inherit;
  --callout-title-padding: 0;
  --callout-title-size: inherit;
  --callout-title-weight: 600;
  --callout-content-padding: 0;
  --callout-content-background: transparent;
  --callout-blend-mode: var(darken);
  --callout-info: 8, 109, 221;
  --callout-todo: 8, 109, 221;
  --callout-default: 8, 109, 221;
  --callout-bug: 233, 49, 71;
  --callout-error: 233, 49, 71;
  --callout-fail: 233, 49, 71;
  --callout-success: 8, 185, 78;
  --callout-example: 120, 82, 238;
  --callout-important: 0, 191, 188;
  --callout-summary: 0, 191, 188;
  --callout-tip: 0, 191, 188;
  --callout-question: 236, 117, 0;
  --callout-warning: 236, 117, 0;
  --callout-quote: 158, 158, 158;
  --callout-collapse-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTkgMThsNi02bC02LTYiLz48L3N2Zz4=");
}

.theme-light {
  --callout-blend-mode: var(darken);
}

.theme-dark {
  --callout-blend-mode: var(lighten);
}

html[data-theme=light] #app {
  --callout-blend-mode: var(darken);
}

html[data-theme=dark] #app {
  --callout-blend-mode: var(lighten);
}

/**
 * Obsidian callout about
 *
 * The following style is exactly the same as in obsidian
 */
.callout {
  overflow: hidden;
  border-style: solid;
  border-color: rgba(var(--callout-color), var(--callout-border-opacity));
  border-width: var(--callout-border-width);
  border-radius: var(--callout-radius);
  margin: 1em 0;
  mix-blend-mode: var(--callout-blend-mode);
  background-color: rgba(var(--callout-color), 0.1);
  padding: var(--callout-padding);
}
details.callout .callout-title {
  margin: 0;
  cursor: pointer;
}
details.callout .callout-title .callout-fold {
  background-color: rgb(var(--callout-color));
  mask-image: var(--callout-collapse-icon);
  mask-size: 100%;
  -webkit-mask-image: var(--callout-collapse-icon);
  -webkit-mask-size: 100%;
  height: 24px;
  width: 24px;
  transition: 100ms ease-in-out;
}

details[close].callout > .callout-title > .callout-fold {
  transform: rotate(-90deg);
}

details[open].callout > .callout-title > .callout-fold {
  transform: rotate(90deg);
}

.callout .callout-title {
  padding: var(--callout-title-padding);
  display: flex;
  gap: 4px;
  font-size: var(--callout-title-size);
  color: rgb(var(--callout-color));
  line-height: var(--line-height-tight);
  align-items: flex-start;
}
.callout .callout-title .callout-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.callout .callout-title .callout-title-inner {
  --font-weight: var(--callout-title-weight);
  font-weight: var(--font-weight);
  color: var(--callout-title-color);
}
.callout .callout-title .callout-title-inner b,
.callout .callout-title .callout-title-inner strong {
  --font-weight: calc(var(--callout-title-weight) + var(--bold-modifier));
  font-weight: var(--font-weight);
}
.callout .callout-content {
  overflow-x: auto;
  padding: var(--callout-content-padding);
  background-color: var(--callout-content-background);
}
.callout {
  --callout-color: var(--callout-default);
  --callout-icon: lucide-pencil;
}
.callout[data-callout=todo] {
  --callout-color: var(--callout-todo);
  --callout-icon: lucide-check-circle-2;
}
.callout[data-callout=success], .callout[data-callout=check], .callout[data-callout=done] {
  --callout-color: var(--callout-success);
  --callout-icon: lucide-check;
}
.callout[data-callout=warning], .callout[data-callout=caution], .callout[data-callout=attention] {
  --callout-color: var(--callout-warning);
  --callout-icon: lucide-alert-triangle;
}
.callout[data-callout=danger], .callout[data-callout=error] {
  --callout-color: var(--callout-error);
  --callout-icon: lucide-zap;
}
.callout[data-callout=tip], .callout[data-callout=hint] {
  --callout-color: var(--callout-tip);
  --callout-icon: lucide-flame;
}
.callout[data-callout=example] {
  --callout-color: var(--callout-example);
  --callout-icon: lucide-list;
}
.callout[data-callout=abstract], .callout[data-callout=summary], .callout[data-callout=tldr] {
  --callout-color: var(--callout-summary);
  --callout-icon: lucide-clipboard-list;
}
.callout[data-callout=quote], .callout[data-callout=cite] {
  --callout-color: var(--callout-quote);
  --callout-icon: quote-glyph;
}



/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #f8f8f2;
	background: none;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: 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;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	border-radius: 0.3em;
}

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

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #f8f8f2;
}

.token.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: #f92672;
}

.token.boolean,
.token.number {
	color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
	color: #e6db74;
}

.token.keyword {
	color: #66d9ef;
}

.token.regex,
.token.important {
	color: #fd971f;
}

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

.token.entity {
	cursor: help;
}