.orbit {
    margin: auto;
    border-radius: 50%;
    border: black 5px dashed;
    height: 25vh;
    width: 25vh;
}
.orbit2 {
    margin: auto;
    border-radius: 50%;
    border: black 2px solid;
    height: 5vh;
    width: 5vh;
    background-color: #1d2124;
}

.orbit4 {
    margin: auto;
    border-radius: 50%;
    border: black 5px dashed;
    height: 20vh;
    width: 20vh;
}

.orbit3 {
    margin: auto;
    border-radius: 50%;
    border: black 2px solid;
    height: 3vh;
    width: 3vh;
    background-color: #1d2124;
}

@keyframes orbitSmall {
    from {
        transform: rotate(0deg) translateX(10vh);
    }

    to {
        transform: rotate(360deg) translateX(10vh);
    }
}

@keyframes orbitSmall2 {
    from {
        transform: rotate(-75deg) translateX(6vh);
    }

    to {
        transform: rotate(285deg) translateX(6vh);
    }
}

@keyframes innerCircle {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes outerCircle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.orbit2 {
    animation: orbitSmall 15s linear infinite;
    transition: 0.5s;
}

.orbit4 {
    animation: innerCircle 15s linear infinite;
    transition: 0.5s;
}

.orbit3 {
    animation: orbitSmall2 15s linear infinite;
    transition: 0.5s;
}

.orbit {
    animation: outerCircle 15s linear infinite;
    transition: 0.5s;
}