/* style.css */
/* floral-background.svg fixed by copilot */
/* CatJump.png licensed from Adobe.com */
/* goofy.jpg cat is licensed from Adobe.com */
/* MrSleepyTime.jpg is licensed from Pexels.com and was taken by Shyam Mishra hobbyist photographer */
/* MisIHateMondays.jpg is licensed from Pexels.com and was taken by Anna Shakhrai */

.layout-box.goofy,
.layout-box.sleepy,
.layout-box.monday {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  filter: saturate(1.03) contrast(1.03);
}

.layout-box.goofy {
  background-color: #f8bfd8;
  background-image: url('Images/Goofy.jpeg');
}

.layout-box.sleepy {
  background-color: #f8bfd8;
  background-image: url('Images/MrSleepyTime.jpg');
}

.layout-box.monday {
  background-color: #f8bfd8;
  background-image: url('Images/MisIHateMondays.jpg');
}

.cat-jump-art {
  position: absolute;
  z-index: 0;
  top: -1.5rem;
  right: 0;
  width: clamp(7rem, calc(60vw - 6.5rem), 46rem);
  max-width: 46rem;
  height: auto;
  pointer-events: none;
}

.box-layout-heading,
.box-grid {
  position: relative;
  z-index: 1;
}

/* Keep the floral illustration fluid while preserving open space around the content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
  background: url("Images/floral-background.svg") center / 100% 100% no-repeat;
}

.site-header,
.box-layout,
.site-footer {
  position: relative;
  z-index: 2;
}