/* The full-bleed background photo, held still while the page scrolls and dimmed
   so the text over it stays readable. Used by the front page and by the
   login-related pages, which is why it is not part of landing.css.

   The image is painted on a fixed pseudo-element rather than with
   background-attachment: fixed, which iOS Safari ignores. */

html {
  /* Shows before the photo loads, and behind it if it ever fails to. */
  background-color: #0f1114;
}

body {
  /* Without this, the body's own background would hide the layer below it. */
  background-color: transparent;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  /* The flat gradient on top is the dimming; raise the alpha to darken. */
  background-image:
    linear-gradient(rgba(15, 17, 20, 0.62), rgba(15, 17, 20, 0.62)),
    url("background.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  /* Scales to cover any window without distorting the photo. */
  background-size: cover;
}