#stars {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: -1;
}

.star{
    position: absolute;
    
    background: white;

    border-radius: 50%;

    opacity: 1;
    /*
    */
    animation:drift_side 8s infinite ease-in-out;
}

.star-middle{
    position: absolute;
    
    background: white;

    border-radius: 50%;

    opacity: 1;
    /*
    */
    animation: drift_up 6s infinite ease-in-out;

}

.star-inner {
    /*  
    */
    position: absolute;
    
    background: white;

    border-radius: 50%;

    opacity: 0.2;
    
    animation: twinkle 4s infinite ease-in-out;
}

@keyframes twinkle {
    0% {
        opacity: 0.1;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.1;
        transform: scale(1);
    }
}

@keyframes drift_up {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes drift_side {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(-20px);
    }

    100% {
        transform: translateX(0px);
    }
}