body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  background-color: #050811; 
  color: #ffffff;
}

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

  /* The layered image stack remains identical */
  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');

  /* CHANGES HERE: */
  /* Layer 1 (Embers): Shrinks each individual tile width down to 400px (adjust this number to change size) */
  /* Layer 2 & 3: Keep their full viewport screen coverage */
  background-size: 800px auto, cover, cover; 

  /* CHANGES HERE: */
  /* Layer 1 (Embers): Tiles infinitely from left-to-right ONLY along the bottom axis */
  /* Layer 2 & 3: Stay strictly locked as single full-screen elements */
  background-repeat: repeat-x, no-repeat, no-repeat; 

  /* CORRESPONDING ALIGNMENTS: */
  /* Keeps the repeated ember strip locked cleanly to the bottom baseline edge */
  background-position: bottom left, center center, center center; 
}


div.subscribe {
    /* Layer 1: Dark smoky charcoal inside base */
    /* Layer 2: Glowing volcanic orange to crimson gradient slanted at 20deg */
    /*background:
      linear-gradient(rgba(18, 14, 14, 0.85), rgba(18, 14, 14, 0.85)),
      linear-gradient(20deg, #ff4d00, #990000);*/

    background: #FFFFFF22;
    width: 800px;
    margin: 0 auto;

    /* Replaced teal with a brilliant molten-orange border */
    border: 3px solid #ff7700;
    border-radius: 100px;
    margin-top: 30px;
    padding-bottom: 20px;

    /* MULTI-LAYER GLOW EFFECT: */
    /* Layer 1: Sharp, intense white-hot core shimmer */
    /* Layer 2: Saturated fiery orange mid-glow */
    /* Layer 3: Soft, massive deep red atmospheric expansion */
    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: 'K2D', 'sans-serif';*/
}

h2 {
    /*font-family: 'K2D', 'sans-serif';*/
    color: white;
}

div.promo h2 {
  color: white;
}

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;
}