#star-field {
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 z-index:-10;
 background:#0a0a0f;
}

.star {
 position:absolute;
 background:white;
 border-radius:50%;
 animation:twinkle 5s infinite;
}

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


.shooting-star {
 position:absolute;
 width:2px;
 height:2px;
 background:white;
 box-shadow:0 0 6px white;
 border-radius:50%;
}

.shooting-star::before {
 content:'';
 position:absolute;
 top:0;
 left:-50px;
 width:50px;
 height:1px;
 background:linear-gradient(90deg, transparent, white);
 transform:translateY(-50%);
}

@keyframes shoot {
 0% {
 transform:translateX(0) translateY(0);
 opacity:1;
 }
 100% {
 transform:translateX(300px) translateY(300px);
 opacity:0;
 }
}


.planet {
 position:absolute;
 border-radius:50%;
 background:radial-gradient(circle at 30% 30%, #4facfe, #00427B);
 box-shadow:0 0 20px rgba(79, 172, 254, 0.5);
}

.planet.small {
 width:30px;
 height:30px;
}

.planet.medium {
 width:60px;
 height:60px;
}

.planet.large {
 width:100px;
 height:100px;
}


@keyframes float {
 0%, 100% {
 transform:translateY(0);
 }
 50% {
 transform:translateY(-15px);
 }
}

.floating {
 animation:float 4s ease-in-out infinite;
}


.galaxy-fog {
 position:fixed;
 width:200%;
 height:200%;
 top:-50%;
 left:-50%;
 background:radial-gradient(ellipse at center, transparent 0%, rgba(79, 172, 254, 0.05) 50%, transparent 100%);
 animation:fog-pulse 20s ease-in-out infinite;
 z-index:-5;
}

@keyframes fog-pulse {
 0%, 100% { opacity:0.5;}
 50% { opacity:0.8;}
}


.light-particle {
 position:absolute;
 width:4px;
 height:4px;
 background:rgba(255, 255, 255, 0.8);
 border-radius:50%;
 box-shadow:0 0 10px rgba(255, 255, 255, 0.5);
 animation:particle-float 20s infinite linear;
}

@keyframes particle-float {
 0% {
 transform:translateY(100vh);
 opacity:0;
 }
 10% {
 opacity:1;
 }
 90% {
 opacity:1;
 }
 100% {
 transform:translateY(-100vh);
 opacity:0;
 }
}


.aurora {
 position:fixed;
 width:100%;
 height:100%;
 top:0;
 left:0;
 z-index:-8;
 opacity:0.1;
 background:linear-gradient(135deg, transparent 0%, rgba(79, 172, 254, 0.1) 25%, rgba(221, 101, 0, 0.1) 50%, transparent 75%);
 animation:aurora-wave 30s ease-in-out infinite;
}

@keyframes aurora-wave {
 0%, 100% {
 opacity:0.1;
 }
 50% {
 opacity:0.15;
 }
}