@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .stars, .stars2, .stars3 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .stars { background-image: radial-gradient(1px 1px at 20px 30px, white, rgba(0,0,0,0)), radial-gradient(1px 1px at 40px 70px, white, rgba(0,0,0,0)), radial-gradient(1px 1px at 90px 40px, white, rgba(0,0,0,0)), radial-gradient(1px 1px at 130px 80px, white, rgba(0,0,0,0)), radial-gradient(1px 1px at 160px 120px, white, rgba(0,0,0,0)); background-repeat: repeat; animation: float 100s linear infinite; } .stars2 { background-image: radial-gradient(1px 1px at 50px 160px, white, rgba(0,0,0,0)), radial-gradient(1px 1px at 90px 90px, white, rgba(0,0,0,0)), radial-gradient(1px 1px at 220px 60px, white, rgba(0,0,0,0)), radial-gradient(1px 1px at 280px 150px, white, rgba(0,0,0,0)); background-repeat: repeat; animation: float 150s linear infinite; } .stars3 { background-image: radial-gradient(1px 1px at 180px 200px, white, rgba(0,0,0,0)), radial-gradient(1px 1px at 250px 40px, white, rgba(0,0,0,0)), radial-gradient(1px 1px at 320px 180px, white, rgba(0,0,0,0)); background-repeat: repeat; animation: float 200s linear infinite; } body { overflow-x: hidden; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #1e1e1e; } ::-webkit-scrollbar-thumb { background: #8b5cf6; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #7c3aed; } /* Text selection */ ::selection { background: #8b5cf6; color: white; }