div.large * {
    font-size: large;
}
div.large li:not(:last-child) {
    margin-bottom: 0.4em;
}

img {
    border-style: solid;
    border-width: 1px;
    border-color: darkgray;
}

div.divider {
    display: block;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, darkgray, transparent);
    margin-bottom: 1.5em;
}


/* Examples */
div.example {
    display: flex;
    flex-wrap: wrap;
    gap: 2ex;
}
div.example::before, div.example::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, darkgray, transparent);
}
div.example::after {
    margin-bottom: 1.5em;
}
div.exampleMarkup code {
    border: none;
    background-color: transparent;
    padding: 0;
    font-size: small;
}
div:is(.exampleMarkup, .exampleOutput) {
    flex: 1;
    flex-direction: row;
    align-items: stretch;
    padding: 1ex;
    border-style: solid;
    border-color: darkgray;
    border-width: 1px;
    border-radius: 5px;
    background-color: ghostwhite;
    min-width: 35ex;
    height: inherit;
}
div:is(.exampleMarkup, .exampleOutput)::before {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    padding: 0.75ex;
    margin: -0.75ex -0.75ex 0px -0.75ex;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: cornflowerblue;
}
div.exampleMarkup::before {
    content: "Markdown";
}
div.exampleOutput::before {
    content: "Output";
}
div.example img {
    max-width: 100%;
}