// pre[class*="language-"] {
//   display: block;
//   background-color: var(--code-background-color);
//   color: var(--code-text-color);
//   font-family: var(--mono-font);
//   font-size: 0.85em;
//   line-height: 1.33em;
//   border-radius: 0.25em;
//   box-shadow: var(--card-shadow);

//   padding: 30px 15px;

//   overflow-x: auto;
//   scrollbar-color: var(--primary-color) var(--scrollbar-track-color);
//   scrollbar-width: thin;

//   &::-webkit-scrollbar {
//     height: 5px;
//   }
//   &::-webkit-scrollbar-thumb {
//     background: var(--primary-color);
//   }
// }

code[class*='language-'],
pre[class*='language-'] {
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	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;
}

pre[class*='language-']::-moz-selection,
pre[class*='language-'] ::-moz-selection,
code[class*='language-']::-moz-selection,
code[class*='language-'] ::-moz-selection {
	text-shadow: none;
	background: rgba(29, 59, 83, 0.99);
}

pre[class*='language-']::selection,
pre[class*='language-'] ::selection,
code[class*='language-']::selection,
code[class*='language-'] ::selection {
	text-shadow: none;
	background: rgba(29, 59, 83, 0.99);
}

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

.token.comment,
.token.prolog,
.token.cdata {
	color: rgb(99, 119, 119);
	font-style: italic;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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