#doc-content h2,
#doc-content h3,
#doc-content h4 {
	margin-bottom: 30px;
	font-family: 'Crete Round', serif;
}

#doc-content h1 {
	font-family: 'Crete Round', serif;
	margin-bottom: 20px;
	font-size: 40px;
}

#doc-content h2 {
	padding-top: 2.25rem;
	font-size: 28px;
}

#doc-content h3 {
	padding-top: 1rem;
	font-size: 22px;
	line-height: 1.4;
	margin-bottom: 18px !important;
}

#doc-content h4 {
	font-size: 1.25rem;
	padding-top: 2rem;
}

#doc-content p {
	font-size: 18px;
	line-height: 28px;
	font-family: 'Hind', sans-serif;
	font-weight: 500;
	padding-bottom: 30px;
}

#doc-content em {
	font-style: italic;
}

#doc-content ul,
ol {
	margin-top: -20px;
	margin-bottom: 30px;
}

#doc-content li {
	font-size: 18px;
	font-family: 'Hind', sans-serif;
	margin-left: 45px;
	margin-top: 5px;
	line-height: 24px;
}

#doc-content ol > li {
	list-style: decimal;
}

#doc-content ul > li {
	list-style: disc;
}

#doc-content a {
	color: var(--link-color);
	text-decoration: none;
	white-space: nowrap;
}

.code-title {
	max-width: 764px;
	box-sizing: border-box;
	font-family: 'Roboto Mono', monospace;
	background: var(--code-title-background);
	color: var(--code-title-color);
	font-size: 1rem;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	padding-left: 2rem;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.code-title:not(.empty) {
	height: 3rem;
}

.code-title + pre {
	padding-top: 1rem !important;
	margin-top: 0px !important;
	border-top-left-radius: 0px !important;
	border-top-right-radius: 0px !important;
}

.code-title.empty + pre {
	padding-top: 2rem !important;
	border-top-left-radius: 10px !important;
	border-top-right-radius: 10px !important;
}

#doc-content pre {
	margin-bottom: 30px;
	background: #11141a;
	border-radius: 10px;
	padding: 2rem;
	overflow-x: auto;
}

p > code,
li > code,
h3 > code,
h1 > code,
h4 > code {
	/* background: #ffffff; */
	/* padding: 2px 6px; */
	border-radius: 4px;
	font-size: 15px;
	padding: 1px 4px;
	font-family: 'Roboto Mono', monospace;
	white-space: nowrap;
	color: var(--text-highlight);
	background-color: var(--text-highlight-background);
}

.message > p > code {
	color: white !important;
}

.message p a {
	color: white !important;
	text-decoration: underline !important;
}

h1 > code {
	font-size: 40px;
	margin-bottom: 30px;
}

h3 > code {
	font-size: 20px;
}

#doc-content ol {
	margin-top: -1rem;
}

.table-of-contents {
	margin-top: -1rem !important;
}

.table-of-contents li {
	font-size: 1.25rem !important;
	line-height: 2.5rem;
	height: 2.5rem;
}

#doc-content strong {
	font-weight: bolder;
}

#doc-content blockquote {
	border-left: 10px solid var(--discreet2);
	padding-left: 20px;
	margin-bottom: 30px;
}

#doc-content blockquote p {
	padding-bottom: 0px;
}

#doc-content figcaption {
	width: 70%;
	margin: 0 auto;
	color: var(--caption-text);
	font-family: 'Hind', sans-serif;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

.edgeLabel {
	color: var(--contrast) !important;
}

/* DeepDives should be spread 20 px apart */
.container-deepdive {
	border-radius: 10px;
	background-color: var(--deep-dive-background);
	margin-top: 20px;
}

/* Don't add vertical spacing before the first deepdive */
:not(.container-deepdive) + .container-deepdive {
	margin-top: 0px;
}

/* The elements after a deep dive should be pushed away a little bit more than usual */

.container-deepdive + :not(.container-deepdive, h1, h2, h3) {
	margin-top: 50px;
}
/* headers have a different spacing */
.container-deepdive + :is(h1, h2, h3) {
	margin-top: 40px;
}
