/*
 * A backdrop in the page margins, loaded on every page.
 *
 * It cannot reach the text. `main` and the footer are opaque, so this shows only
 * in the margins either side of the content column.
 *
 * Two narrow strips rather than one wide image: the column covers the middle
 * 640px of a centred background at every viewport width, so a wide picture
 * would have more than half of it permanently hidden. The same file is used at
 * both edges. It must tile vertically without a seam, since pages run to
 * several thousand pixels.
 *
 * A real file rather than a data URI: the CSP allows img-src 'self', not data:.
 */
@media (min-width: 60rem) {
  /* Below this the margins are too thin to show anything but slivers. */
  body {
    background-image: url("/images/bubbles.svg"), url("/images/bubbles.svg");
    background-position:
      left top,
      right top;
    background-repeat: repeat-y, repeat-y;
    background-size: auto, auto;
  }
}