h1 {color:blue;}
/* Core page setup */
body {
  margin: 0;
  padding: 0;
  background: radial-gradient(circle at bottom, #0d1b2a 0%, #010811 100%); /* Deep space gradient */
  overflow-x: hidden;
  min-height: 100vh;
  font-family: sans-serif;
  color: white;
}

/* Background container spanning the full viewport */
.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Keeps the stars behind your text */
  pointer-events: none; /* Allows users to click through to elements below */
}

/* The star generator using box-shadow */
.starry-background::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  
  /* X-offset, Y-offset, blur-radius, color for multiple stars */
  box-shadow: 
    15vw 10vh #fff, 35vw 45vh #ffffff88, 75vw 20vh #fff, 
    55vw 85vh #fff, 90vw 60vh #ffffffaa, 20vw 75vh #fff,
    40vw 15vh #fff, 65vw 50vh #ffffffaa, 80vw 80vh #fff,
    10vw 90vh #fff, 50vw 30vh #ffffff66, 85vw 10vh #fff;
    
  /* Animation properties */
  animation: floatStars 25s linear infinite;
}

/* Duplicating the layer for a continuous seamless loop */
.starry-background::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 
    15vw 110vh #fff, 35vw 145vh #ffffff88, 75vw 120vh #fff, 
    55vw 185vh #fff, 90vw 160vh #ffffffaa, 20vw 175vh #fff,
    40vw 115vh #fff, 65vw 150vh #ffffffaa, 80vw 180vh #fff,
    10vw 190vh #fff, 50vw 130vh #ffffff66, 85vw 110vh #fff;
    
  animation: floatStars 25s linear infinite;
}

/* Keyframes to move stars vertically */
@keyframes floatStars {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100vh); /* Seamlessly resets position */
  }
}

/* Content styling example */
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}