body {
	line-height: 1.5;
}

@media (min-width: 48rem) {
	body {
		font-size: 1.125rem;
	}
}

@media (min-width: 80rem) {
	body {
		font-size: 1.25rem;
	}
}

.blog-content :where(h1, h2, h3, h4, h5, h6) {
	margin: 4.5rem 0 1rem;
	line-height: 1.1;
	font-family: var(--accentFont);
	font-weight: bold;
	/* color: var(--darker); */
	text-wrap: balance;
	color: wheat;
}

.blog-content h1 {
	font-size: clamp(2.0rem, calc(2.5rem + 1vw), 3.0rem);
	line-height: 3.5rem;
	margin: 0 0 2rem;
	position: relative;
	overflow: hidden;
}

.blog-content h2 {
	font-size: clamp(1.8rem, calc(1.8rem + 1vw), 2.5rem);
}

.blog-content h3 {
	font-size: clamp(1.6rem, calc(1.6rem + 1vw), 2rem);
}

.blog-content h4 {
	font-size: clamp(1.5rem, calc(1.5rem + 1vw), 1.8rem);
}

.blog-content h5 {
	font-size: clamp(1.35rem, calc(1.35rem + 1vw), 1.5rem);
}

.blog-content h6 {
	font-size: clamp(1.1rem, calc(1.1rem + 1vw), 1.25rem);
}

.blog-content a {
	color: var(--darker);
	text-decoration-thickness: 1px;
	text-decoration-color: var(--dark);
}

.blog-content ul {
	list-style-type: square;
	padding-left: 1.5rem;
}

.blog-content ul ul {
	list-style-type: circle;
}

.blog-content ul::marker {
	color: var(--accent);
}

.blog-content p,
ul {
	color: white;
	margin-bottom: 1em;
}

.blog-content li {
	color: white;
}

.blog-content blockquote {
	border-left: 4px solid #4f46e5;
	margin: 1.5em 0;
	padding: 0.75em 1em;
	color: #374151;
	font-style: italic;
}

.blog-content blockquote > p {
	margin: 0;
}

.blog-content a {
	text-decoration-line: underline;
	text-underline-offset: 0.25rem;
	text-decoration-color: #fedd03;
}

.blog-content pre {
	color: white;
	padding: 1rem;
	overflow-x: scroll;
	border-radius: 0.25rem;
	font-size: 0.75em;
	margin-bottom: 1rem;
}