body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  background-color: #050811; 
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.crossnav {
  text-shadow: none;
}



body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  pointer-events: none;

  height: 110vh;
  top: 0vh;

  background-image: 
    url('/static/firesparks.png'),
    radial-gradient(circle at center, rgba(5, 8, 17, 0) 20%, rgba(5, 8, 17, 0.8) 70%, rgba(5, 8, 17, 1) 95%),
    url('/static/hk.jpg');

  /* Keep your tiled ember width size configuration */
  background-size: 800px auto, cover, cover; 
  background-repeat: repeat-x, no-repeat, no-repeat; 

  background-position: 0px 100%, center center, center center;

  animation: ambient-wind 120s linear infinite;
}

/* THE SEAMLESS TRANSFORMATION LOOP */
@keyframes ambient-wind {
  0% {
    /* Baseline starting position */
    transform: translate3d(0, 0, 0);
    background-position: 0px 100%, center center, center center;
  }
  50% {
    /* Shifts the entire layer UPWARDS by 40px and RIGHT by 200px */
    /* Because of our 110vh height, the hidden bottom buffer safely covers the gap */
    transform: translate3d(0, -40px, 0);
    background-position: 400px 100%, center center, center center;
  }
  100% {
    /* Smoothly wraps the horizontal tile back to 400px while returning to the baseline height */
    transform: translate3d(0, 0, 0);
    background-position: 800px 100%, center center, center center;
  }
}


div.subscribe {
    background: #FFFFFF22;
    width: 800px;
    margin: 0 auto;

    border: 3px solid #ff7700;
    border-radius: 100px;
    margin-top: 30px;
    padding-bottom: 20px;

    box-shadow:
      0 0 15px rgba(255, 230, 150, 0.4),
      0 0 35px rgba(255, 77, 0, 0.6),
      0 10px 70px rgba(153, 0, 0, 0.5);

    /* Smooth transitions if the box highlights or adapts on hover states */
    transition: all 0.3s ease-in-out;

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}


@media (max-width: 850px) {
  div.subscribe {
    width: 360px;
  }

}

div.subscribe h3 {
    margin-top: 20px;
}

marquee {
    color: white;
  font-family: "Michroma", sans-serif;
}

h2 {
  font-family: "Michroma", sans-serif;
    color: white;
}

div.promo h2 {
  color: white;
}

div.promo {
  margin-top: 0px;
}

a {
  color: white;
}

div.crossnav {
  background-color: #fff;
  width: 250px;
}

div.crossnav a {
  color: #000;
}

div.crossnav img {
  float: left;
}

/*div.banner img {
  width: 400px;
}*/

div.blurb {
  margin-top: 20px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}


div.prescreen_post {
  color: black;
  box-shadow: 25px 10px darkslategrey;
  text-shadow: none;
}


hr {
  border: none;
  height: 20px;
  background-color: rgb(255, 230, 150);
  box-shadow:
    0 0 15px rgba(255, 230, 150, 0.4),
    0 0 35px rgba(255, 77, 0, 0.6),
    0 10px 70px rgba(153, 0, 0, 0.5);
    
}