@font-face {
  font-family: 'SW-FFG';
  src: url('sw-ffg.otf') format('opentype');
}

@keyframes twinkle {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

@keyframes space-drift {
  0% { transform: translateY(0); }
  100% { transform: translateY(-1000px); }
}

html, body {
  margin: 0;
  padding: 0;
  background-color: #0a0a1a; /* Darker blue-black space color */
  min-height: 100vh;
  font-family: system-ui, -apple-system, sans-serif;
  position: relative;
  overflow-x: hidden;
}

body::before,
body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;
}

/* First star layer - small stars */
body::before {
  background-image: 
    radial-gradient(1px 1px at 25% 5%, white, rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 50% 15%, white, rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 75% 25%, white, rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 25% 35%, white, rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 50% 45%, white, rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 75% 55%, white, rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 25% 65%, white, rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 50% 75%, white, rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 75% 85%, white, rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 25% 95%, white, rgba(255, 255, 255, 0));
  background-size: 200px 200px;
  animation: space-drift 150s linear infinite;
}

/* Second star layer - medium stars with twinkle effect */
body::after {
  background-image: 
    radial-gradient(2px 2px at 10% 10%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
    radial-gradient(2px 2px at 30% 20%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
    radial-gradient(2px 2px at 50% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
    radial-gradient(2px 2px at 70% 40%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
    radial-gradient(2px 2px at 90% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
    radial-gradient(2px 2px at 15% 60%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
    radial-gradient(2px 2px at 35% 70%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
    radial-gradient(2px 2px at 55% 80%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
    radial-gradient(2px 2px at 75% 90%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
    radial-gradient(2px 2px at 95% 95%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
    /* Blue nebula effect */
    radial-gradient(600px 600px at 50% 30%, rgba(30, 60, 180, 0.15), rgba(30, 60, 180, 0)),
    /* Purple nebula effect */
    radial-gradient(800px 800px at 75% 80%, rgba(120, 30, 180, 0.1), rgba(120, 30, 180, 0)),
    /* Distant galaxy cluster */
    radial-gradient(100px 100px at 20% 40%, rgba(255, 255, 200, 0.03), rgba(255, 255, 200, 0));
  background-size: 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 
                   300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px,
                   100% 100%, 100% 100%, 100% 100%;
  animation: space-drift 100s linear infinite, twinkle 4s ease-in-out infinite alternate;
}