#article-main { margin: auto; padding: 1rem 0; line-height: 175%; > header { margin: auto; text-align: center; color: #6c7a89; h1 { font-size: 2.5rem; color: #fff; line-height: 125%; padding: 0 1em; } } > #article-body { margin-top: 2rem; } > #article-body, .markdown-body { display: flex; flex-direction: column; gap: 1.5rem; .table-of-contents { margin: 2rem auto; line-height: 150%; width: var(--design-width); font-size: .8em; ol { padding-left: 1rem; } li + li { margin: 0; } } blockquote { border-left: 4px solid #60a5fa; padding: 0.5rem 1rem; margin: 1rem auto; color: #e4f1fe; background-color: #021127; text-align: justify; max-width: var(--design-width); width: 100%; border-radius: .5rem; p + p { padding-top: 1rem; } } > h2, > h3, > h4, > h5, > h6 { width: var(--design-width); margin: 1rem auto; text-align: left; gap: .5rem; padding-bottom: .2rem; position: relative; .heading-permalink { position: absolute; top: 0; right: 0; font-size: .75rem; } } > h2 { font-size: 2.25rem; color: #ff6347; border-bottom: solid 1px #ff6347; } > h3 { font-size: 2rem; color: #ff8c00; border-bottom: solid 1px #ff8c00; } > h4 { font-size: 1.75rem; color: #ffa500; border-bottom: dotted 1px #ffa500; } > h5 { font-size: 1.5rem; color: #ffd700; } > h6 { font-size: 1.25rem; color: #ffff00; } hr { width: var(--design-width); border: none; height: 1px; background: linear-gradient(to right, #030712 0%, #030712 20%, #1a1f33 50%, #030712 80%, #030712 100%); margin: 20px 0; margin: 1em auto; } ol, ul { max-width: var(--body-width); width: 100%; margin: auto; li { text-align: justify; } li + li { margin-top: .5em; } } > p { text-align: justify; max-width: var(--body-width); width: 100%; margin: auto; } pre.shiki { font-size: .8em; line-height: 150%; overflow: auto; border: solid 2px #112; border-radius: .5rem; width: var(--design-width); max-height: 80vh; margin: 1em auto; > code { counter-reset: step; counter-increment: step 0; .line::before { user-select: none; content: counter(step); counter-increment: step; width: 3rem; margin-right: 1rem; display: inline-block; text-align: right; color: #6c7a89; padding-left: .5rem; padding-right: .5rem; background-color: #112; } } } :not(pre.shiki):not(h2):not(h3):not(h4):not(h5):not(h6) { code { background-color: #000; color: #aaa; font-size: .8em; border: solid 1px #223; padding: .2rem; border-radius: .25rem; } } strong { color: #fff; font-weight: 900; } sup { line-height: 100%; margin-left: .2rem; } } }