/* Stars Animation - root colors and sizes */
:root {
    --star-color: aliceblue;
    --small-star: 1px;
    --medium-star: 2px;
    --large-star: 3px;
}

/* Keyframes */
@keyframes galaxy {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

@keyframes galaxy2 {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.5) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: scale(3) rotate(360deg);
        opacity: 0;
    }
}

@keyframes galaxy3 {
    0% {
        transform: scale(0) rotatey(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.5) rotateY(180deg);
        opacity: 1;
    }
    100% {
        transform: scale(3) rotateY(360deg);
        opacity: 0;
    }
}

/* Stars */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: -1;
    pointer-events: none;
}

.stars::before,
.stars::after,
.stars span {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: transparent;
    border-radius: 50%;
}

.stars::before {
    width: var(--small-star);
    height: var(--small-star);
    box-shadow: 
        0 0 var(--star-color), 
        0 -100px var(--star-color), 
        -90px -80px var(--star-color),
        -120px 15px var(--star-color), 
        85px 95px var(--star-color), 
        -210px 220px var(--star-color),
        220px 210px var(--star-color), 
        -230px -220px var(--star-color), 
        -310px 295px var(--star-color),
        320px 310px var(--star-color), 
        -405px 390px var(--star-color), 
        415px 420px var(--star-color),
        55px 45px var(--star-color), 
        -65px 60px var(--star-color), 
        70px -80px var(--star-color),
        -75px -65px var(--star-color), 
        145px 55px var(--star-color), 
        -135px 160px var(--star-color),
        155px -140px var(--star-color), 
        -125px -135px var(--star-color), 
        260px 245px var(--star-color),
        -235px 270px var(--star-color), 
        275px -240px var(--star-color), 
        -250px -255px var(--star-color),
        350px 355px var(--star-color), 
        -360px 370px var(--star-color), 
        355px -340px var(--star-color),
        -365px -355px var(--star-color), 
        450px 445px var(--star-color), 
        -460px 470px var(--star-color),
        455px -440px var(--star-color), 
        -470px -465px var(--star-color);
    animation: galaxy 25s linear infinite;
    transform-origin: center;
    will-change: transform, opacity;
}

.stars::after {
    width: var(--medium-star);
    height: var(--medium-star);
    box-shadow: 
        0 0 var(--star-color), 
        0 -120px var(--star-color), 
        -95px -85px var(--star-color),
        -125px 20px var(--star-color), 
        90px 105px var(--star-color), 
        -215px 230px var(--star-color),
        225px 215px var(--star-color), 
        -235px -225px var(--star-color), 
        -315px 305px var(--star-color),
        325px 315px var(--star-color), 
        -410px 395px var(--star-color), 
        420px 425px var(--star-color),
        60px 50px var(--star-color), 
        -70px 65px var(--star-color), 
        75px -85px var(--star-color),
        -80px -70px var(--star-color), 
        150px 60px var(--star-color), 
        -140px 165px var(--star-color),
        160px -145px var(--star-color), 
        -130px -140px var(--star-color), 
        265px 250px var(--star-color),
        -240px 275px var(--star-color), 
        280px -245px var(--star-color), 
        -255px -260px var(--star-color),
        355px 360px var(--star-color), 
        -365px 375px var(--star-color), 
        360px -345px var(--star-color),
        -370px -360px var(--star-color), 
        455px 450px var(--star-color), 
        -465px 475px var(--star-color),
        460px -445px var(--star-color), 
        -475px -470px var(--star-color);
    animation: galaxy2 35s linear infinite reverse;
    transform-origin: center;
    will-change: transform, opacity;
}

.stars span {
    width: var(--large-star);
    height: var(--large-star);
    box-shadow: 
        0 0 var(--star-color), 
        0 -130px var(--star-color), 
        -105px -95px var(--star-color),
        -135px 25px var(--star-color), 
        95px 115px var(--star-color), 
        -225px 240px var(--star-color),
        235px 225px var(--star-color), 
        -245px -235px var(--star-color), 
        -325px 315px var(--star-color),
        335px 325px var(--star-color), 
        -420px 405px var(--star-color), 
        430px 435px var(--star-color),
        65px 55px var(--star-color), 
        -75px 70px var(--star-color), 
        80px -90px var(--star-color),
        -85px -75px var(--star-color), 
        155px 65px var(--star-color), 
        -145px 170px var(--star-color),
        165px -150px var(--star-color), 
        -135px -145px var(--star-color), 
        270px 255px var(--star-color),
        -245px 280px var(--star-color), 
        285px -250px var(--star-color), 
        -260px -265px var(--star-color),
        360px 365px var(--star-color), 
        -370px 380px var(--star-color), 
        365px -350px var(--star-color),
        -375px -365px var(--star-color), 
        460px 455px var(--star-color), 
        -470px 480px var(--star-color),
        465px -450px var(--star-color), 
        -480px -475px var(--star-color);
    animation: galaxy3 50s linear infinite;
    transform-origin: center;
    will-change: transform, opacity;
}