.stars__wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.stars {
    position: absolute;
    background-repeat: repeat;
    background-position: top left;
    background-image: url('./../stars/stars.png');
    transform-origin: top left;
    will-change: transform;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

@keyframes stars-move-1 {
    from {
        transform: translate3d(-1024px, 0, 0) rotate(0deg);
    }
    to {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

@keyframes stars-move-2 {
    from {
        transform: translate3d(0, 0, 0) rotate(90deg);
    }
    to {
        transform: translate3d(1024px, 0, 0) rotate(90deg);
    }
}

@keyframes stars-move-3 {
    from {
        transform: translate3d(0, 0, 0) rotate(180deg);
    }
    to {
        transform: translate3d(1024px, 0, 0) rotate(180deg);
    }
}

@keyframes stars-move-4 {
    from {
        transform: translate3d(-1024px, 0, 0) rotate(270deg);
    }
    to {
        transform: translate3d(0, 0, 0) rotate(270deg);
    }
}

.stars-1 {
    top: 0;
    left: 0;
    min-width: 2048px;
    min-height: 100vh;
    width: 200vw;
    height: 100vh;
    animation-name: stars-move-1;
    animation-duration: 546s;
}

.stars-2 {
    top: 0;
    left: 100vw;
    min-width: 100vh;
    min-height: 2048px;
    width: 100vh;
    height: 200vw;
    animation-name: stars-move-2;
    animation-duration: 182s;
}

.stars-3 {
    top: 100vh;
    left: 100vw;
    min-width: 2048px;
    min-height: 100vh;
    width: 200vw;
    height: 100vh;
    animation-name: stars-move-3;
    animation-duration: 109.2s;
}

.stars-4 {
    top: 100vh;
    left: 0;
    min-width: 100vh;
    min-height: 2048px;
    width: 100vh;
    height: 200vw;
    animation-name: stars-move-4;
    animation-duration: 78s;
}