/* Force blue gingham across the entire browser background */

html {
  min-height: 100%;
  background-color: #dff3fb !important;
}

body,
body.home-page {
  position: relative !important;
  min-height: 100vh !important;
  margin: 0 !important;

  background: transparent !important;
}

/* Fixed layer that cannot be covered by older body-background rules */
body.home-page::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;

  background-color: #dff3fb;
  background-image: url("/images/patterns/blue-pink-gingham.jpg?v=2400");
  background-repeat: repeat;
  background-position: center top;
  background-size: 260px auto;

  pointer-events: none;
}

/* All actual site content sits above the gingham */
body.home-page > * {
  position: relative;
  z-index: 1;
}

/* Narrower main rectangle so more gingham shows on both sides */
body.home-page .retro-home {
  width: min(1040px, calc(100% - 110px)) !important;
  margin: 22px auto 42px !important;
}

/* Keep stars only inside the main site frame */
body.home-page .retro-home {
  background-color: #fffefe !important;
  background-image: url("/images/patterns/pink-stars.jpg") !important;
  background-repeat: repeat !important;
  background-position: center top !important;
  background-size: 280px auto !important;
}

@media (max-width: 760px) {
  body.home-page .retro-home {
    width: calc(100% - 20px) !important;
    margin: 10px auto 24px !important;
  }
}