@font-face {
  font-family: 'MyCustomFont';
  src: url('https://suicideclub.neocities.org/fonts/PixelTimes.ttf');
  -webkit-font-smoothing: none;
  
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  position: relative;   /* new — establishes containing block for the snow layer */
  min-height: 100vh;
  background-color: #000000;
  background-origin: padding-box;
  margin: 0;
  padding:0;
  overflow-x: hidden;
  overflow-y: auto;
  justify-content: center;
  align-items: center;
  font-family: 'MyCustomFont';
  }

#header {
  color: blue;
  width: 100vw;
  min-height: 5vw;
  height:50px;
  text-align: center;
  }
  
.options {
  width:100vw;
  height:100px;
  display: flex;
  justify-content: center;
  margin-top:0;
  padding-top:0;
  color: blue;
  gap: 30px;
  
}

.container {
  position: relative;
  z-index: 0;
  display: flex;
  width: 60vw;
  height: 600px;
  background-color: white;
  opacity: 0.85;
  margin-left: 20%;
  margin-top: 10%;
  flex-direction: row;
   flex-wrap: wrap; 
   box-shadow: 4px 4px 0 grey;
}
  
/*ffd9a1*/
 /* Container setting a retro, dark night sky background */
.pixel-snow-scene {
   position: fixed;
   /* was: fixed */
  top: 0;
  left: 0;
  bottom: 0; 
  width: 100%;
  height: 100%;         /* see note below */
  z-index: -1;
  margin: 0;
  background: #000000;
}

/* The vertical bar of the 8-bit cross */
.pixel-snow,
.pixel-snow::after {
  position: absolute;
  background: #fff;
}

.pixel-snow {
  top: 0; 
  left: 0;
  
  /* The vertical pixel bar (1px wide, 5px tall) */
  width: 1px;
  height: 5px;
  
  /* Seamlessly looping grid layout */
  box-shadow: 
    /* --- Group 1: Visible on screen initially --- */
    15vw 20vh #fff,  25vw 12vh #fff,  35vw 35vh #fff,  5vw 45vh #fff,
    45vw 10vh #fff,  55vw 55vh #fff,  65vw 25vh #fff,  75vw 60vh #fff,
    85vw 15vh #fff,  95vw 40vh #fff,  18vw 70vh #fff,  28vw 85vh #fff,
    60vw 75vh #fff,  70vw 90vh #fff,  88vw 80vh #fff,  42vw 95vh #fff,
    
    /* --- Group 2: Cloned sky layer (Shifted exactly -100vh) --- */
    15vw -80vh #fff, 25vw -88vh #fff, 35vw -65vh #fff, 5vw -55vh #fff,
    45vw -90vh #fff, 55vw -45vh #fff, 65vw -75vh #fff, 75vw -40vh #fff,
    85vw -85vh #fff, 95vw -60vh #fff, 18vw -30vh #fff, 28vw -15vh #fff,
    60vw -25vh #fff, 70vw -10vh #fff, 88vw -20vh #fff, 42vw -5vh #fff;

  /* Infinite downward animation sequence */
  animation: pixelFall 8s linear infinite;
}

/* The horizontal bar that turns the pixels into an 8-bit cross (+) */
.pixel-snow::after {
  content: "";
  /* The horizontal pixel bar (5px wide, 1px tall) */
  width: 5px;
  height: 1px;
  
  /* Positioned perfectly in the center of the vertical bar */
  top: 2px;
  left: -2px;
  
  /* Crucial: Inherits the exact box-shadows from the parent element */
  box-shadow: inherit;
}

/* Perfect vertical translation for a seamless loop */
@keyframes pixelFall {
  
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100vh);
  }
}