Starfield Background

<div class="starfield">
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <!-- Add more stars -->
</div>

.starfield {
    position: relative;
    width: 100%;
    height: 300px;
    background: #0a0a1a;
    overflow: hidden;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s ease-in-out infinite, moveStars 20s linear infinite;
}

.star:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s, 0s;
}

.star:nth-child(2) {
    top: 60%;
    left: 30%;
    animation-delay: 1s, 2s;
}

.star:nth-child(3) {
    top: 40%;
    left: 70%;
    animation-delay: 2s, 4s;
}

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

@keyframes moveStars {
    from { transform: translateX(0); }
    to { transform: translateX(-100px); }
}