.markdown p {
	margin: 0.75rem 0;
}

.markdown > h1 {
	font-size: 2.25rem;
	line-height: 2.5rem;
	margin-bottom: 1rem;
	margin-top: 2rem;
	font-family: var(--font-display);
	opacity: 0.9;
	font-weight: 700;
	color: var(--c-text-2);
	scroll-margin-top: 50px;
}

.markdown > h2 {
	font-size: 1.5rem;
	line-height: 2rem;
	margin-bottom: 1rem;
	margin-top: 2.5rem;
	font-family: var(--font-display);
	opacity: 0.9;
	font-weight: 600;
	color: var(--c-text-2);
	scroll-margin-top: 5rem;
}

.markdown > h2::before {
	font-family: var(--font-body);
	content: "#";
	display: block;
	height: 0;
	position: relative;
	right: 1.5rem;
	opacity: 0.2;
}

.markdown > h2:target::before {
	color: var(--c-thp);
	opacity: 1;
}

.markdown > h3 {
	font-size: 1.35rem;
	line-height: 1.75rem;
	margin-bottom: 1rem;
	margin-top: 1.75rem;
	font-family: var(--font-display);
	opacity: 0.9;
	font-weight: 400;
	color: var(--c-text-2);
	scroll-margin-top: 5rem;
}

.markdown > h3::before {
	content: "##";
	display: block;
	height: 0;
	position: relative;
	right: 2.25rem;
	opacity: 0.5;
}

.markdown > h3:target::before {
	color: var(--c-thp);
	opacity: 1;
}

.markdown ul {
	list-style-type: disc;
	list-style-position: inside;
}

.markdown ul li {
	padding: 0.5rem 0;
}

.markdown p > code {
	border: solid 1px color-mix(in oklab, var(--c-border-1) 25%, transparent);
	border-radius: 0.25rem;
	padding: 0 0.25rem;
	font-size: 0.9rem;
}

.markdown > pre {
	margin: 0.5em 0;
	padding: 0.75em 0.75em;
	color: var(--code-theme-color);
	background: var(--code-theme-bg-color);
}

.markdown > p > a {
	color: var(--c-link);
	text-decoration: underline;
}

.markdown blockquote {
	color: red;
}

pre:has(> code) {
	overflow: scroll;
}


.two-column a {
	color: #2563eb;
	text-decoration: underline;
	display: inline-block;
}

.two-column h3 {
	margin: 0.75rem 0;
}

h1 > code {
	background-color: color-mix(in oklab, var(--background) 75%, var(--foreground) 20%);
	border-radius: 0.25rem;
	padding: 0 5px;
}

/*
*  Language specific code blocks
*/

pre:has(> code.language-thp) {
	border: solid 1px color-mix(in oklab, var(--c-thp) 75%, var(--foreground) 20%);
	border-radius: 0.1rem;
	background: var(--code-background);
}
pre:has(> code.language-thp) > code.language-thp::before {
	content: "thp";
	font-family: var(--font-display);
	position: absolute;
	background: var(--code-background);
	border-radius: 0.25rem;
	color: var(--c-thp);
	font-weight: 600;
	padding: 0 0.5rem;
	margin-left: -0.5rem;
	margin-top: -1.5rem;
	font-size: 0.9rem;
	transform: scaleX(0.9);
}

pre:has(> code.language-php) {
	border: solid 1px color-mix(in oklab, var(--c-php) 75%, var(--foreground) 20%);
	border-radius: 0.1rem;
	background: color-mix(in oklab, var(--c-php) 2%, var(--background));
}
pre:has(> code.language-php) ::before {
	content: "php";
	font-family: var(--font-display);
	position: absolute;
	background: var(--background);
	color: var(--c-php);
	font-weight: 600;
	padding: 0 0.5rem;
	margin-left: -0.5rem;
	margin-top: -1.5rem;
	font-size: 0.9rem;
	transform: scaleX(0.9);
}

/* thp code token colors */
.token.String {
	color: var(--code-string);
}
.token.Comment {
	color: var(--code-comment);
}
/* .token.Identifier { */
/* 	color: oklch(0.8028 0.0757 242.85); */
/* } */
.token.Datatype {
	color: var(--code-datatype);
}
.token.K_Var, .token.K_Val {
	color: var(--code-token);
}
.token.Int, .token.Float {
	color: var(--code-number);
}