/*
 * Makes a hero background fill the frame it is drawn into.
 *
 * Each of these documents was written to stand alone at the shape of its own
 * artwork - 1920 by 700, declared as an aspect-ratio - which is right when the
 * file is opened on its own and wrong behind the hero, where the height is set
 * by the copy in front of it. Measured at 390 wide: the frame was 425 tall and
 * the scene drew 142 of it, leaving 283px of the body's background colour under
 * the words.
 *
 * So the scene is told to take the height it is given, and its media to cover
 * that box rather than stretch to it. Some of these files already say cover and
 * some say nothing, which on a box that is no longer the artwork's shape is the
 * difference between a photograph and a smeared one.
 *
 * Loaded by every file in this folder. A new background needs the same line in
 * its head and nothing else.
 */

html,
body {
  height: 100%;
}

/* The scene wrapper, whatever each file happens to call it. */
.hero,
.stage,
body > section,
body > div {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
}

/* The picture, the animation surface and the footage all cover. */
img,
canvas,
video {
  object-fit: cover;
}