<style>
:root {
--color: rgba( 67, 0, 172, .8); /* purple */
/* --color: rgba(134, 123, 147, .8); /* purple */
/* --color: rgba( 13, 66, 169, .9) /* blue */
}

#doc {
color: #1D1D1F;
}

h1 {
color: var(--color) !important;
font-size: 4em !important;
text-shadow: rgba(29, 29, 31, .4) 0.04em 0.04em 0.2em;
}

h2:before {
content: "## ";
font-size: 0.75em;
color: rgba(123, 123, 131, .8);
}

h2 {
color: #F5F5F7 !important;
font-size: 2em !important;
background-color: var(--color) !important;
padding: 12px 0px 8px 6px !important;
border-radius: 4px;
text-shadow: rgba(29, 29, 31, .2) 0.1em 0.1em 0.2em;
box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
}

h3:before {
content: "### ";
font-size: 0.75em;
color: rgba(123, 123, 131, .8);
}

h3 {
font-size: 1.5em !important;
color: var(--color) !important;
border-bottom: solid 2px var(--color);
text-shadow: rgba(29, 29, 31, .2) 0.1em 0.1em 0.2em;
}

details {
margin: 2px;
padding: 6px 10px;
background: #F2F2F0;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px inset;
}

.markdown-body:not(.next-editor) pre {
background-color: #fff;
box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
border-radius: 10px;
}

.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {
background: none;
}
</style>