@font-face {
  font-family: 'Annotation Mono';
  src: url('/fonts/AnnotationMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* ---------- Shared styles ---------- */

code[class*="language-"],
pre[class*="language-"] {
	color: #111b27;
	background: none;
	font-family: 'Annotation Mono', Consolas, monospace;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;
	tab-size: 4;
	hyphens: none;
}

pre[class*="language-"] {
	padding: 1em;
	margin: 0.5em 0;
	overflow: auto;
	border-radius: 0.3em;
}

:not(pre) > code[class*="language-"] {
	padding: 0.1em 0.3em;
	border-radius: 0.3em;
	white-space: normal;
}

/* ---------- Light theme (default) ---------- */

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

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #3c526d;
}

.token.punctuation {
	color: #111b27;
}

.token.delimiter.important,
.token.selector .parent,
.token.tag,
.token.tag .token.punctuation {
	color: #006d6d;
}

.token.attr-name,
.token.boolean,
.token.boolean.important,
.token.number,
.token.constant,
.token.selector .token.attribute {
	color: #755f00;
}

.token.class-name,
.token.key,
.token.parameter,
.token.property,
.token.property-access,
.token.variable {
	color: #005a8e;
}

.token.attr-value,
.token.inserted,
.token.color,
.token.selector .token.value,
.token.string,
.token.string .token.url-link {
	color: #116b00;
}

.token.builtin,
.token.keyword-array,
.token.package,
.token.regex {
	color: #af00af;
}

.token.function,
.token.selector .token.class,
.token.selector .token.id {
	color: #7c00aa;
}

.token.atrule .token.rule,
.token.combinator,
.token.keyword,
.token.operator,
.token.pseudo-class,
.token.pseudo-element,
.token.selector,
.token.unit {
	color: #a04900;
}

.token.deleted,
.token.important {
	color: #c22f2e;
}

.token.keyword-this,
.token.this,
.token.bold {
	font-weight: bold;
}

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

/* ---------- Dark theme ---------- */

@media (prefers-color-scheme: dark) {

	code[class*="language-"],
	pre[class*="language-"] {
		color: #f8f8f2;
	}

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

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

	.token.punctuation {
		color: #fefefe;
	}

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

	.token.boolean,
	.token.number {
		color: #00e0e0;
	}

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

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

	.token.atrule,
	.token.attr-value,
	.token.function,
	.token.regex,
	.token.important {
		color: #ffd700;
	}

	.token.keyword {
		color: #00e0e0;
	}

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

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