1/*
2.parenthetical class used to keep e.g. "less-than symbol (<)" from wrapping
3the end parenthesis onto its own line. Use in a span between the last word and
4the parenthetical. So for this example, you'd use
5```less-than <span class="parenthetical">symbol (`<`)</span>```
6*/
7.parenthetical {
8    white-space: nowrap;
9}
10
11/*
12Warnings and notes:
13
14Write the <div>s on their own line. E.g.
15
16<div class="warning">
17
18Warning: This is bad!
19
20</div>
21*/
22main .warning p {
23    padding: 10px 20px;
24    margin: 20px 0;
25}
26
27main .warning p::before {
28    content: "⚠️ ";
29}
30
31.light main .warning p,
32.rust main .warning p {
33    border: 2px solid red;
34    background: #ffcece;
35}
36
37.rust main .warning p {
38    /* overrides previous declaration */
39    border-color: #961717;
40}
41
42.coal main .warning p,
43.navy main .warning p,
44.ayu main .warning p {
45    background: #542626
46}
47
48/* Make the links higher contrast on dark themes */
49.coal main .warning p a,
50.navy main .warning p a,
51.ayu main .warning p a {
52    color: #80d0d0
53}
54