body {
    --pad: 1rem;

    box-sizing: border-box;
    margin-inline: auto;
    padding: var(--pad);

    width: clamp(500px, 100%, 1000px);

    background-color: #eee;

    -webkit-user-select: none;
    user-select: none;
}

.fake {
    overflow-y: hidden;
    overflow-y: clip;
}

.content {
    --cPad: calc(var(--pad) * 2);

    box-sizing: border-box;
    padding: var(--cPad);

    background-color: white;

    border-radius: var(--pad);
    overflow: hidden;
    overflow: clip;

    box-shadow: 0 0 0.5rem 0.5rem lightgray;

}

.content * {
    text-align: justify;
    /* text-align-last: center; */
}

.content :is(
    h1, h2, h3, h4, h5, h6,
    p,
    ul, ol, li,
    blockquote,
    pre,
    figure,
    hr,  
    form,
    fieldset,
) {
    margin-block: 1.5em;
    &:first-child {
        margin-block-start: 0;
    }
    &:last-child:not(header &) {
        margin-block-end: 0;
    }
}

.content {
    blockquote {
        --bor: solid 1px gray;
        box-sizing: border-box;
        
        margin-inline: var(--cPad);
        padding: 1rem;
        
        background-color: lightgray;
        border: var(--bor);
        
    }
}

.image-split {
    display: grid;

    grid-template-columns: 3fr 12rem;
    gap: var(--cPad);

    img {
        max-width: 100%;
        border-radius: var(--cPad);
    }
}