:root {
    --img-border: 0;
}

.fmt-text.fmt-optional {
    color: var(--grayHover);
}

.fmt-para {
    display: block;
    margin: .25em 0;
}

.fmt-instructions {
    display: block;
    font-style: italic;
    margin: .25em 0;
}

.fmt-emoji {
    font-family: "Noto Color Emoji", sans-serif;
}

.fmt-prominent {
    font-size: 2em;
    margin: .5em 0;

    display: flex;
    justify-content: center;
    text-align: left;
}

.fmt-link {
    display: block;
    font-size: 0.67em;
    margin: .25em 0;
}

.fmt-expression {
    /* fix katex overflow */
    padding: .1em;
    overflow-y: hidden;

    /* scroll for horizontal overflow */
    max-width: 100%;
    overflow-x: auto;
}

.fmt-expression.fmt-block {
    display: block;
    margin: .25em 0;
    text-align: center;
}

.fmt-emphasis {
    font-style: italic;
    color: var(--gray);
}

.fmt-image {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 10px;
}

.fmt-image {
    margin: 10px 0;
}

.fmt-audio, .fmt-video {
    margin: 10px 0;
    text-align: center;
}

.fmt-image img, .fmt-video video {
    max-height: 300px;
    max-width: min(500px, 100%);
}

.fmt-audio audio {
    width: 400px;
    max-width: 100%;
}

.fmt-stem .fmt-image img,
.fmt-stem .fmt-video video {
    max-width: min(var(--img-max-width, 100%), 100%);
    max-height: var(--img-max-height);
    min-width: 0;
}

.fmt-stem .fmt-image img {
    box-sizing: content-box; /* imgMargin is padding */
    padding: var(--img-margin, 0);
    border: calc(var(--img-border) * 1px) solid var(--gray); /* CSS condition */
    border-radius: calc(var(--img-border) * 5px); /* CSS condition */
}

@media screen and (min-width: 600px) {
    .fmt-image.fmt-wrap {
        flex-wrap: nowrap;
    }
}

.fmt-left-center {
    display: flex;
    justify-content: center;
    text-align: left;
}

.margin-collapse {
    max-width: 100%;
    padding: 1px 0;
}