html, body {
    background: #161615 !important;
}

.stars, .stars-2, .stars-3, .stars-big {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
    background: transparent;
}

/* Sloj 1 - male zvijezde (mrvicu veće) */
.stars {
    width: 4px;
    height: 4px;
    box-shadow: 4vw 8vh 1px #fff, 12vw 20vh 1px #fff, 18vw 74vh 1px #fff, 23vw 46vh 1px #fff, 29vw 15vh 1px #fff, 35vw 62vh 1px #fff, 41vw 33vh 1px #fff, 47vw 85vh 1px #fff, 52vw 11vh 1px #fff, 58vw 54vh 1px #fff, 64vw 27vh 1px #fff, 69vw 78vh 1px #fff, 74vw 39vh 1px #fff, 80vw 6vh 1px #fff, 85vw 58vh 1px #fff, 90vw 24vh 1px #fff, 95vw 71vh 1px #fff, 8vw 56vh 1px #fff, 15vw 91vh 1px #fff, 26vw 67vh 1px #fff, 33vw 9vh 1px #fff, 44vw 49vh 1px #fff, 50vw 94vh 1px #fff, 61vw 43vh 1px #fff, 67vw 14vh 1px #fff, 76vw 88vh 1px #fff, 82vw 31vh 1px #fff, 88vw 64vh 1px #fff, 97vw 17vh 1px #fff, 54vw 70vh 1px #fff;
    animation: driftA 60s ease-in-out infinite, pulse 6s ease-in-out infinite alternate;
}

/* Sloj 2 - srednje zvijezde (mrvicu veće) */
.stars-2 {
    width: 2.5px;
    height: 2px;
    opacity: 0.7;
    box-shadow: 6vw 14vh #fff, 14vw 63vh #fff, 21vw 35vh #fff, 31vw 80vh #fff, 39vw 19vh #fff, 48vw 60vh #fff, 56vw 28vh #fff, 63vw 92vh #fff, 71vw 44vh #fff, 79vw 12vh #fff, 86vw 73vh #fff, 93vw 50vh #fff, 10vw 84vh #fff, 25vw 7vh #fff, 37vw 52vh #fff, 45vw 24vh #fff, 59vw 76vh #fff, 68vw 17vh #fff, 77vw 66vh #fff, 91vw 30vh #fff;
    animation: driftB 80s ease-in-out infinite, pulse 8s ease-in-out infinite alternate;
}

/* Sloj 3 - najmanje zvijezde (mrvicu veće) */
.stars-3 {
    width: 1.5px;
    height: 1.5px;
    opacity: 0.45;
    box-shadow: 9vw 42vh #fff, 17vw 12vh #fff, 28vw 58vh #fff, 36vw 87vh #fff, 49vw 38vh #fff, 57vw 9vh #fff, 66vw 69vh #fff, 73vw 22vh #fff, 84vw 47vh #fff, 92vw 83vh #fff, 13vw 72vh #fff, 42vw 15vh #fff, 62vw 51vh #fff, 88vw 5vh #fff;
    animation: driftC 100s ease-in-out infinite, pulse 10s ease-in-out infinite alternate;
}
.stars-4 {
    width: 1.7px;
    height: 1.7px;
    opacity: 0.45;
    box-shadow: 9vw 42vh #fff, 17vw 12vh #fff, 28vw 58vh #fff, 36vw 87vh #fff, 49vw 38vh #fff, 57vw 9vh #fff, 66vw 69vh #fff, 73vw 22vh #fff, 84vw 47vh #fff, 92vw 83vh #fff, 13vw 72vh #fff, 42vw 15vh #fff, 62vw 51vh #fff, 88vw 5vh #fff;
    animation: driftE 100s ease-in-out infinite, pulse 10s ease-in-out infinite alternate;
}
.stars-5 {
    width: 1.8px;
    height: 1.8px;
    opacity: 0.45;
    box-shadow: 9vw 42vh #fff, 17vw 12vh #fff, 28vw 58vh #fff, 36vw 87vh #fff, 49vw 38vh #fff, 57vw 9vh #fff, 66vw 69vh #fff, 73vw 22vh #fff, 84vw 47vh #fff, 92vw 83vh #fff, 13vw 72vh #fff, 42vw 15vh #fff, 62vw 51vh #fff, 88vw 5vh #fff;
    animation: driftF 100s ease-in-out infinite, pulse 10s ease-in-out infinite alternate;
}
.stars-6 {
    width: 1.3px;
    height: 1.3px;
    opacity: 0.45;
    box-shadow: 9vw 42vh #fff, 17vw 12vh #fff, 28vw 58vh #fff, 36vw 87vh #fff, 49vw 38vh #fff, 57vw 9vh #fff, 66vw 69vh #fff, 73vw 22vh #fff, 84vw 47vh #fff, 92vw 83vh #fff, 13vw 72vh #fff, 42vw 15vh #fff, 62vw 51vh #fff, 88vw 5vh #fff;
    animation: driftG 100s ease-in-out infinite, pulse 10s ease-in-out infinite alternate;
}
.stars-7 {
    width: 1.25px;
    height: 1.25px;
    opacity: 0.45;
    box-shadow: 9vw 42vh #fff, 17vw 12vh #fff, 28vw 58vh #fff, 36vw 87vh #fff, 49vw 38vh #fff, 57vw 9vh #fff, 66vw 69vh #fff, 73vw 22vh #fff, 84vw 47vh #fff, 92vw 83vh #fff, 13vw 72vh #fff, 42vw 15vh #fff, 62vw 51vh #fff, 88vw 5vh #fff;
    animation: driftH 100s ease-in-out infinite, pulse 10s ease-in-out infinite alternate;
}

/* Sloj 4 - velike zvijezde (mrvicu veće) */
.stars-big {
    width: 3px;
    height: 3px;
    opacity: 0.9;
    box-shadow: 11vw 18vh 2px #fff, 27vw 41vh 2px #fff, 38vw 10vh 2px #fff, 53vw 67vh 2px #fff, 71vw 26vh 2px #fff, 83vw 74vh 2px #fff, 94vw 33vh 2px #fff;
    animation: driftD 50s ease-in-out infinite, pulse 12s ease-in-out infinite alternate;
}

/* Ispravljeno treptanje */
@keyframes pulse {
    0% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }
}

/* Više kretanja (20 do 35 piksela pomaka) i osjetni scale */
@keyframes driftA {
    0% {
        transform: translate3d(-15px, -15px, 0) rotate(0deg) scale(1);
    }

    25% {
        transform: translate3d(25px, -20px, 0) rotate(0.1deg) scale(1.05);
    }

    50% {
        transform: translate3d(30px, 15px, 0) rotate(-0.1deg) scale(0.95);
    }

    75% {
        transform: translate3d(-20px, 25px, 0) rotate(0.1deg) scale(1.02);
    }

    100% {
        transform: translate3d(-15px, -15px, 0) rotate(0deg) scale(1);
    }
}

@keyframes driftB {
    0% {
        transform: translate3d(15px, 12px, 0) rotate(0deg) scale(1);
    }

    20% {
        transform: translate3d(-20px, 8px, 0) rotate(-0.1deg) scale(1.03);
    }

    45% {
        transform: translate3d(10px, -15px, 0) rotate(0.1deg) scale(0.97);
    }

    70% {
        transform: translate3d(-12px, 20px, 0) rotate(-0.1deg) scale(1.04);
    }

    100% {
        transform: translate3d(15px, 12px, 0) rotate(0deg) scale(1);
    }
}

@keyframes driftC {
    0% {
        transform: translate3d(-10px, 15px, 0) rotate(0deg) scale(1);
    }

    30% {
        transform: translate3d(15px, 10px, 0) rotate(0.1deg) scale(1.04);
    }

    55% {
        transform: translate3d(20px, -12px, 0) rotate(-0.1deg) scale(0.96);
    }

    80% {
        transform: translate3d(-15px, -20px, 0) rotate(0.1deg) scale(1.03);
    }

    100% {
        transform: translate3d(-10px, 15px, 0) rotate(0deg) scale(1);
    }
}

@keyframes driftD {
    0% {
        transform: translate3d(20px, -15px, 0) rotate(0deg) scale(1);
    }

    35% {
        transform: translate3d(-15px, 20px, 0) rotate(0.1deg) scale(1.06);
    }

    70% {
        transform: translate3d(25px, 10px, 0) rotate(-0.1deg) scale(0.94);
    }

    100% {
        transform: translate3d(20px, -15px, 0) rotate(0deg) scale(1);
    }
}
@keyframes driftE {
    0% {
        transform: translate3d(-20px, 10px, 0) rotate(0deg) scale(1);
    }

    25% {
        transform: translate3d(15px, -15px, 0) rotate(0.05deg) scale(1.03);
    }

    50% {
        transform: translate3d(10px, 20px, 0) rotate(-0.05deg) scale(0.97);
    }

    75% {
        transform: translate3d(-10px, -25px, 0) rotate(0.08deg) scale(1.02);
    }

    100% {
        transform: translate3d(-20px, 10px, 0) rotate(0deg) scale(1);
    }
}

@keyframes driftF {
    0% {
        transform: translate3d(25px, -10px, 0) rotate(0deg) scale(1);
    }

    20% {
        transform: translate3d(-18px, 12px, 0) rotate(-0.08deg) scale(1.04);
    }

    40% {
        transform: translate3d(12px, -15px, 0) rotate(0.07deg) scale(0.96);
    }

    60% {
        transform: translate3d(-15px, 18px, 0) rotate(-0.05deg) scale(1.05);
    }

    100% {
        transform: translate3d(25px, -10px, 0) rotate(0deg) scale(1);
    }
}

@keyframes driftG {
    0% {
        transform: translate3d(-15px, -20px, 0) rotate(0deg) scale(1);
    }

    30% {
        transform: translate3d(20px, 15px, 0) rotate(0.1deg) scale(1.03);
    }

    50% {
        transform: translate3d(15px, -10px, 0) rotate(-0.08deg) scale(0.97);
    }

    80% {
        transform: translate3d(-20px, 18px, 0) rotate(0.06deg) scale(1.04);
    }

    100% {
        transform: translate3d(-15px, -20px, 0) rotate(0deg) scale(1);
    }
}

@keyframes driftH {
    0% {
        transform: translate3d(10px, 20px, 0) rotate(0deg) scale(1);
    }

    35% {
        transform: translate3d(-25px, -15px, 0) rotate(0.09deg) scale(1.05);
    }

    70% {
        transform: translate3d(20px, 10px, 0) rotate(-0.06deg) scale(0.95);
    }

    100% {
        transform: translate3d(10px, 20px, 0) rotate(0deg) scale(1);
    }
}