:root{
	--codeblock-background-color: var(--second-background-color);
	--codeblock-background-alternate-color: var(--second-alternate-background-color);
	--codeblock-color: var(--text-color);
	--codeblock-font-family: var(--code-font-family);
	--codeblock-text-size: var(--code-text-size);

	--codeblock-line-height: 2rem;
	--codeblock-line-padding: 0 1.5rem;

	--codeblock-line-number-color: var(--alternate-text-color);
	--codeblock-line-number-font-weight: 700;
	--codeblock-line-number-margin: 0 1rem 0 0;
	--codeblock-line-number-padding: 0 0.5rem 0 0;

	--codeblock-pseudocode-main-color: #CA0;
	--codeblock-pseudocode-constant-color: #FFF;
	--codeblock-pseudocode-keyword-color: #36BB30;
	--codeblock-pseudocode-identifier-color: #40AEDD;
	--codeblock-pseudocode-comment-color: #888;
	--codeblock-pseudocode-comment-weight: 700;

	--codeblock-c-main-color: var(--codeblock-pseudocode-main-color);
	--codeblock-c-constant-color: var(--codeblock-pseudocode-constant-color);
	--codeblock-c-keyword-color: var(--codeblock-pseudocode-keyword-color);
	--codeblock-c-identifier-color: var(--codeblock-pseudocode-identifier-color);
	--codeblock-c-comment-color: var(--codeblock-pseudocode-comment-color);
	--codeblock-c-comment-weight: var(--codeblock-pseudocode-comment-weight);
}

blockquote.codeblock{
	display: grid;
	grid-template-columns: 1fr;

	background: var(--codeblock-background-color);
	color: var(--codeblock-color);
	counter-reset: line;
	font-family: var(--codeblock-font-family);
	font-size: var(--codeblock-text-size);
	margin: 0;
	overflow-x: auto;
	white-space: nowrap;
	width: fit-content;
	max-width: 100%;
}

blockquote.codeblock > div:before{
	content: counter(line);

	border-right: 1px solid var(--alternate-text-color);
	color: var(--codeblock-line-number-color);
	display: inline-block;
	font-weight: var(--codeblock-line-number-font-weight);
	height: var(--codeblock-line-height);
	line-height: var(--codeblock-line-height);
	margin: var(--codeblock-line-number-margin);
	padding: var(--codeblock-line-number-padding);
	width: 2rem;
}

blockquote.codeblock > div{
	counter-increment: line;
	line-height: var(--codeblock-line-height);
	padding: var(--codeblock-line-padding);
}

blockquote.codeblock > div:nth-of-type(2n){
	background: var(--codeblock-background-alternate-color);
}



code[data-language="C"][data-type="main"],
blockquote.codeblock[data-language="C"] [data-type="main"]{
	color: var(--codeblock-c-main-color);
}

code[data-language="C"][data-type="constant"],
blockquote.codeblock[data-language="C"] [data-type="constant"]{
	color: var(--codeblock-c-constant-color);
}

code[data-language="C"][data-type="keyword"],
blockquote.codeblock[data-language="C"] [data-type="keyword"]{
	color: var(--codeblock-c-keyword-color);
}

code[data-language="C"][data-type="identifier"],
blockquote.codeblock[data-language="C"] [data-type="identifier"]{
	color: var(--codeblock-c-identifier-color);
}

code[data-language="C"][data-type="comment"],
blockquote.codeblock[data-language="C"] [data-type="comment"]{
	color: var(--codeblock-c-comment-color);
	font-weight: var(--codeblock-c-comment-weight);
}


code[data-language="pseudocode"][data-type="main"],
blockquote.codeblock[data-language="pseudocode"] [data-type="main"]{
	color: var(--codeblock-pseudocode-main-color);
}

code[data-language="pseudocode"][data-type="constant"],
blockquote.codeblock[data-language="pseudocode"] [data-type="constant"]{
	color: var(--codeblock-pseudocode-constant-color);
}

code[data-language="pseudocode"][data-type="keyword"],
blockquote.codeblock[data-language="pseudocode"] [data-type="keyword"]{
	color: var(--codeblock-pseudocode-keyword-color);
}

code[data-language="pseudocode"][data-type="identifier"],
blockquote.codeblock[data-language="pseudocode"] [data-type="identifier"]{
	color: var(--codeblock-pseudocode-identifier-color);
}

code[data-language="pseudocode"][data-type="comment"],
blockquote.codeblock[data-language="pseudocode"] [data-type="comment"]{
	color: var(--codeblock-pseudocode-comment-color);
	font-weight: var(--codeblock-pseudocode-comment-weight);
}