:root {
    --body-before-filter: grayscale(30%) brightness(60%);
    --box-bg-color: #ccc;
}

body {
  /* Ensure the body is the relative container for the background */
  position: relative; 
  min-height: 100vh;
  background-color: transparent;
}

p, h2, .dayh2, i {
    background-color: transparent;
    color: #e2e2e2;
}

a {
    background-color: transparent;
    color: #8fbaff;
}

.dayh2 {
    color: #c4beff;
}

.subduedh1 {
    opacity: 35%;
}

em {
    padding: 7px;
    border-radius: 5px;
    opacity: 70%;
}

em>a {
    color: #005bff;
}

.footnote {
    border-radius: 1.5mm;
}

.footnote, .footnote *, .hopdiv {
    background-color: var(--box-bg-color);
}

body::before {
  content: "";
  position: fixed; /* Keeps background fixed while scrolling */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Places the image behind all content */
  
  /* Background properties */
  background-image: url('../images/ray-trace-bg.jpg'); 
  background-size: cover; /* Ensures image fills the viewport */
  background-position: center;
  
  /* Muting effects */
  opacity: 0.7;
  filter: var(--body-before-filter);
}