/*
-----------------------------------------------
	syntax-highlighting [prism]
-----------------------------------------------
*/

/*	colors --------------------------------- */

pre[class*='language-'] {
	--background: hsl(180, 10%, 95%);
	--base: hsl(200, 50%, 30%);
	--comment: hsl(200, 25%, 55%);
	--keyword: hsl(200, 30%, 40%);
	--function: hsl(200, 30%, 40%);
	--string: hsl(200, 50%, 50%);
	--number: LightSeaGreen;
	--tags: hsl(280, 30%, 50%);
	--important: var(--string);
}

/*	type-base ------------------------------ */

code[class*='language-'], pre[class*='language-'] {
	background: none;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	color: var(--base);
	tab-size: 2;
	-moz-tab-size: 2;
	-webkit-hyphens: none;
	hyphens: none;
}

/*	code-blocks ---------------------------- */

pre[class*='language-'] {
	overflow: auto;
	padding: 1.5rem 2rem;
	margin: .8rem 0 2.4rem;
	border-radius: var(--border-r);
}

:not(pre)>code[class*='language-'], pre[class*='language-'] {
	background: var(--background);
}

/*	tokens --------------------------------- */

.token.comment, .token.prolog, .token.doctype, .token.cdata {
	color: var(--comment)
}

.token.punctuation {
	color: var(--base)
}

.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted {
	color: var(--tags)
}

.token.boolean, .token.number {
	color: var(--number)
}

.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
	color: var(--string)
}

.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable {
	color: var(--base)
}

.token.atrule, .token.attr-value, .token.function, .token.class-name {
	color: var(--function)
}

.token.keyword {
	color: var(--keyword)
}

.token.regex, .token.important {
	color: var(--important)
}

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

.token.italic {
	font-style: italic
}

.token.entity {
	cursor: help
}