/* View Layout */

article.view-document a {
    display: inline-block;
}

/* Document Layout */

div.document-section {
    display: grid;
    gap: 16px;
    box-sizing: border-box;
    padding: 8px 0;
}

/* removes the ugly looking padding between the header and first element */
div.document-section:first-child {
    padding-top: 0;
}

div.document-section:last-child {
    padding-bottom: 0;
}

div.document-spacer {
    margin: 8px 0;
    border-bottom: var(--border-thickness) dashed var(--background-secondary);
}

div.document-divider {
    position: relative;
    margin: 16px 0;
    background-color: var(--background-primary);
    width: 100%;
    height: 2px;
}

div.document-divider::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    clip-path: polygon(
        100% 25%,
        62.5% 25%,
        50% 0%,
        37.5% 25%,
        0% 25%,
        25% 50%,
        0% 100%,
        50% 75%,
        100% 100%,
        75% 50%,
        100% 25%
    );
    background-color: var(--background-highlight);
    width: 16px;
    height: 16px;
    content: '';
}

/* Document Elements */

div.document-section p,
div.document-section pre {
    line-height: 1.5em;
}

p.document-item::before {
    margin-right: 16px;
    margin-left: 8px;
    content: '◆';
}

p.document-header {
    font-size: x-large;
}

p.document-subheader {
    font-size: large;
}

p.document-paragraph code {
    display: inline-block;
    box-sizing: border-box;
    background-color: var(--background-translucent);
    padding: 4px;
    color: var(--font-color-accent);
    font-size: small;
}

pre.document-codeblock {
    box-sizing: border-box;
    background-color: var(--background-translucent);

    /* weird chin on the pre elements this padding here negates it */
    padding: 12px;
    padding-bottom: 0;
    overflow-x: scroll;
    overflow-y: scroll;
    color: var(--font-color-accent);
    font-size: small;
}