.johnn-document {
	padding-block: 32px 80px;
	color: var(--document-ink);
}
.johnn-document-header {
	margin-top: 64px;
	padding-top: 32px;
	border-top: 2px solid var(--document-accent);
}
.johnn-document-title {
	margin: 0;
	font: var(--type-page-title);
	letter-spacing: var(--type-page-title-spacing);
	overflow-wrap: anywhere;
}
.johnn-document-content {
	margin-top: 40px;
	font: var(--type-body);
	letter-spacing: var(--type-body-spacing);
	overflow-wrap: anywhere;
}
.johnn-document-content :is(p, ul, ol, blockquote) { margin-block: 0 1.5em; }
.johnn-document-content h2 {
	margin: 1.5em 0 .6em;
	font: var(--type-section-title);
	letter-spacing: var(--type-section-title-spacing);
}
.johnn-document-content :is(h3, h4, h5, h6) {
	margin: 1.5em 0 .6em;
	font: var(--type-module-title);
	letter-spacing: var(--type-module-title-spacing);
}
.johnn-document-content a {
	color: var(--document-accent);
	text-decoration: underline;
	text-underline-offset: .2em;
}
.johnn-document-content :is(img, video, iframe) { max-width: 100%; }
.johnn-document-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}
.johnn-document-content :is(th, td) { padding: .75em; border: 1px solid var(--document-line); }
.johnn-document-content blockquote { padding-left: 1em; border-left: 3px solid var(--document-accent); }
@media (max-width: 700px) {
	.johnn-document { padding-block: 24px 48px; }
	.johnn-document-header { margin-top: 40px; padding-top: 24px; }
	.johnn-document-content { margin-top: 28px; }
}