<!-- div.star#starn${⬤}*8 -->
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>

<style>
    .star {
        position: fixed;
        z-index: -2;
        visibility: hidden;
        font-size: 0.35rem;
        width: 40px;
        height: 40px;
        background: radial-gradient(white, rgb(255, 255, 255, 0.5) 10%, transparent 50%);
    }

    .star:nth-of-type(1) {
        animation: starAnim1 20s linear;
        animation-iteration-count: infinite;
        animation-delay: 1s;
    }
    
    .star:nth-of-type(2) {
        animation: starAnim2 27s linear;
        animation-iteration-count: infinite;
        animation-delay: 1s;
    }
    
    .star:nth-of-type(3) {
        animation: starAnim3 23s linear;
        animation-iteration-count: infinite;
        animation-delay: 1s;
    }
    
    .star:nth-of-type(4) {
        animation: starAnim4 39s linear;
        animation-iteration-count: infinite;
        animation-delay: 1s;
    }
    
    .star:nth-of-type(5) {
        animation: starAnim5 30s linear;
        animation-iteration-count: infinite;
        animation-delay: 1s;
    }
    
    .star:nth-of-type(6) {
        animation: starAnim6 15s linear;
        animation-iteration-count: infinite;
        animation-delay: 1s;
    }
    
    .star:nth-of-type(7) {
        animation: starAnim7 23s linear;
        animation-iteration-count: infinite;
        animation-delay: 1s;
    }
    
    .star:nth-of-type(8) {
        animation: starAnim8 18s linear;
        animation-iteration-count: infinite;
        animation-delay: 1s;
    }
    

    @keyframes starAnim1 {
        0% {
            top: -10vh;
            right: 10vw;
            visibility: visible;
        }

        100% {
            top: 110vh;
            right: 20vw;
        }
    }

    
</style>