/*
.parenthetical class used to keep e.g. "less-than symbol (<)" from wrapping
the end parenthesis onto its own line. Use in a span between the last word and
the parenthetical. So for this example, you'd use
```less-than <span class="parenthetical">symbol (`<`)</span>```
*/
.parenthetical {
    white-space: nowrap;
}

/*
Warnings and notes:

Write the <div>s on their own line. E.g.

<div class="warning">

Warning: This is bad!

</div>
*/
main .warning p {
    padding: 10px 20px;
    margin: 20px 0;
}

main .warning p::before {
    content: "⚠️ ";
}

.light main .warning p,
.rust main .warning p {
    border: 2px solid red;
    background: #ffcece;
}

.rust main .warning p {
    /* overrides previous declaration */
    border-color: #961717;
}

.coal main .warning p,
.navy main .warning p,
.ayu main .warning p {
    background: #542626;
}

/* Make the links higher contrast on dark themes */
.coal main .warning p a,
.navy main .warning p a,
.ayu main .warning p a {
    color: #80d0d0;
}