.space-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; overflow: hidden; contain: strict; } .space-bg-glow { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at 70% 30%, rgba(138, 43, 226, 0.15), transparent 60%), radial-gradient(circle at 20% 80%, rgba(65, 105, 225, 0.15), transparent 50%); pointer-events: none; z-index: 10; animation: space-nebula-pulse 10s ease-in-out infinite alternate; } @keyframes space-nebula-pulse { 0% { opacity: 0.6; } 100% { opacity: 1; } } .space-starfield { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: transparent; z-index: 11; } .space-shooting-star { position: absolute; width: 250px; height: 3px; background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); border-radius: 50%; animation: space-shoot 8s linear infinite; opacity: 0; z-index: 12; } @keyframes space-shoot { 0% { left: var(--shoot-start-x); top: var(--shoot-start-y); opacity: 1; width: 0; } 5% { width: 300px; } 15% { left: var(--shoot-end-x); top: var(--shoot-end-y); opacity: 0; width: 0; } 100% { left: var(--shoot-end-x); top: var(--shoot-end-y); opacity: 0; width: 0; } } .space-symbol { position: absolute; animation-timing-function: linear; animation-iteration-count: infinite; font-size: 3rem; opacity: 0.85; z-index: 20; } .space-symbol img { width: 6vh; height: auto; max-width: 60px; object-fit: contain; /* Add a slow spin to images */ animation: space-slow-spin var(--rot-dur, 20s) linear infinite; } /* Specific elements scaling */ .space-planet1, .space-planet2 { font-size: 4rem; } .space-planet1 img, .space-planet2 img { width: 8vh; max-width: 80px; } .space-star { font-size: 2rem; opacity: 0.6; } .space-star img { width: 3vh; max-width: 30px; } @keyframes space-drift-right { 0% { transform: translateX(-10vw) translateY(0) scaleX(-1); } 50% { transform: translateX(50vw) translateY(-5vh) scaleX(-1); } 100% { transform: translateX(110vw) translateY(0) scaleX(-1); } } @keyframes space-drift-left { 0% { transform: translateX(10vw) translateY(0); } 50% { transform: translateX(-50vw) translateY(5vh); } 100% { transform: translateX(-110vw) translateY(0); } } @keyframes space-slow-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }