footer {
  margin-top: 6rem;
  display: block;
}

#sponsored {
  font-weight: 600;
  margin-top: 2rem;
  display: block;
}

/*
.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
}