#space {
position: absolute;
    width: 100%;
    transform-style: preserve-3d;
    perspective: 700px;
    height: 700px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
z-index: 1;
    
}

@media screen and (max-width: 768px) {
    #space {
        
        transform: translate(-58%, -50%) scale(0.5);
    }
}

#space .space_field {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 400px;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
}

#space .space_field .planet {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    border-radius: 100%;
    box-sizing: border-box;
}


.system {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform: rotateX(75deg) rotateY(-30deg);
    transform: rotateX(75deg) rotateY(-30deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.mother,
.satellite-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.mother {
    width: 420px;
    height: 420px;
    margin-top: -210px;
    margin-left: -210px;
    -webkit-transform: rotateY(30deg) rotateX(-75deg);
    transform: rotateY(30deg) rotateX(-75deg);
}

.png-shadow{
        filter: drop-shadow(0 14px 16px rgba(255, 255, 255, 0.8));
            transform: translateZ(0);
}

.space-box::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -50%);  
    border-radius: 50%;    
    z-index: 0;
    animation: glowPulse 30s  infinite;
}

@keyframes glowPulse {
    0%, 100% {
    width: 260px;
        height: 250px;
        opacity: 0.6;
        filter: blur(99px);
        transform: translate(-45%, -50%) scale(1);
        background-color: rgb(3 0 255);
    }
    50% {
        width: 360px;
            height: 350px;
        opacity: 1;
        transform: translate(-45%, -50%) scale(1.1);
        background-color: rgb(0, 140, 255);
        filter: blur(130px);
    }
}

.satellite-orbit {
    width: 600px;
    height: 600px;
    margin-top: -300px;
    margin-left: -260px;
    
    border: 2px solid #ffffff;
    border-radius: 50%;
   
transform-style: flat;
    /* background-image: url(/static/images/orbit.png);
    background-size: cover; */
}

.satellite-orbit:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid #ffffff;
        border-radius: 50%;
        filter: blur(3px);
    width: 101%;
    height: 101%;
}


@keyframes rotate3dChange {
    0% {
        transform: rotate3d(0, 1, 1, 25deg);
    }

    50% {
        transform: rotate3d(0, 1, 1, 30deg);
    }

    100% {
        transform: rotate3d(0, 1, 1, 25deg);
    }
}

@keyframes rotate3dChange2 {
    0% {
        transform: rotate3d(0, 1, 1, 25deg);
    }

    50% {
        transform: rotate3d(0, 1, 1, 44deg);
    }

    100% {
        transform: rotate3d(0, 1, 1, 25deg);
    }
}

.satellite-orbit.orbit-1 {
    opacity: 0.6;
    transform: rotate3d(0, 1, 1, 25deg);
    animation: rotate3dChange 6600ms ease-in-out infinite;
}


.satellite-orbit.orbit-2 {
    width: 760px;
        height: 760px;
        margin-top: -380px;
        margin-left: -340px;
    opacity: 0.2;
    transform: rotate3d(0, 1, 1, 25deg);
        animation: rotate3dChange2 19600ms ease-in-out infinite 600ms;

}

.satellite-orbit.orbit-3 {
    opacity: 0.8;
    width: 480px;
        height: 480px;
        margin-top: -256px;
            margin-left: -212px;

    transform: rotate3d(0, 1, 1, 20deg);
   
}

.satellite-orbit.orbit-4 {
    width: 360px;
        height: 360px;
        margin-top: -100px;
            margin-left: -125px;
        opacity: 1;
        transform: rotate3d(0, 1, 1, 28deg);
        animation: rotate3dChange 11100ms ease-in-out infinite ;
   
}

.satellite-orbit.orbit-5 {
    transform: rotate3d(1, 1, 1, 350deg);
    display: none;
}

.satellite-orbit.orbit-6 {
    transform: rotate3d(1, 1, 1, 420deg);
    display: none;
}

.satellite-orbit.orbit-7 {
    transform: rotate3d(1, 1, 1, 490deg);
    display: none;
}



#space .space_field.satellite .planet {
    left: 100%;
    width: 6px;
    height: 6px;
    background: #fff;
    transform: translate(-50%, -50%);
    filter: blur(1px);
}

#space .space_field_wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

#space .space_field_wrapper:nth-child(1) {
    transform: rotateZ(0deg);
}

#space .space_field_wrapper:nth-child(1) .space_field.satellite {
    -webkit-animation: orbit 2400ms linear infinite;
    animation: orbit 2400ms linear infinite;
}

#space .space_field_wrapper:nth-child(1) .space_field.satellite .planet {
    -webkit-animation: planet 2400ms linear infinite;
    animation: planet 2400ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(2) {
    transform: rotate3d(1, 1, 1, 344deg);
}

#space .space_field_wrapper:nth-child(2) .space_field.satellite {
    -webkit-animation: orbit 2800ms linear infinite;
    animation: orbit 2800ms linear infinite;
}

#space .space_field_wrapper:nth-child(2) .space_field.satellite .planet {
    -webkit-animation: planet 2800ms linear infinite;
    animation: planet 2800ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(3) {
    transform: rotate3d(1, 1, 1, 322deg);
}

#space .space_field_wrapper:nth-child(3) .space_field.satellite {
    -webkit-animation: orbit 3200ms linear infinite;
    animation: orbit 3200ms linear infinite;
}

#space .space_field_wrapper:nth-child(3) .space_field.satellite .planet {
    -webkit-animation: planet 3200ms linear infinite;
    animation: planet 3200ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(4) {
    transform: rotate3d(1, 1, 1, 358deg);
}

#space .space_field_wrapper:nth-child(4) .space_field.satellite {
    -webkit-animation: orbit 3600ms linear infinite;
    animation: orbit 3600ms linear infinite;
}

#space .space_field_wrapper:nth-child(4) .space_field.satellite .planet {
    -webkit-animation: planet 3600ms linear infinite;
    animation: planet 3600ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(5) {
    transform: rotate3d(1, 1, 1, 344deg);
}

#space .space_field_wrapper:nth-child(5) .space_field.satellite {
    -webkit-animation: orbit 4000ms linear infinite;
    animation: orbit 4000ms linear infinite;
}

#space .space_field_wrapper:nth-child(5) .space_field.satellite .planet {
    -webkit-animation: planet 4000ms linear infinite;
    animation: planet 4000ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(6) {
transform: rotate3d(1, 1, 1, 308deg);
}

#space .space_field_wrapper:nth-child(6) .space_field.satellite {
    -webkit-animation: orbit 4400ms linear infinite;
    animation: orbit 4400ms linear infinite;
}

#space .space_field_wrapper:nth-child(6) .space_field.satellite .planet {
    -webkit-animation: planet 4400ms linear infinite;
    animation: planet 4400ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(7) {
    transform: rotate3d(1, 1, 1, 318deg);
}

#space .space_field_wrapper:nth-child(7) .space_field.satellite {
    -webkit-animation: orbit 4800ms linear infinite;
    animation: orbit 4800ms linear infinite;
}

#space .space_field_wrapper:nth-child(7) .space_field.satellite .planet {
    -webkit-animation: planet 4800ms linear infinite;
    animation: planet 4800ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(8) {
    /* transform: rotateZ(-140deg); */
    transform:rotate3d(1, 1, 1, 338deg);
}

#space .space_field_wrapper:nth-child(8) .space_field.satellite {
    -webkit-animation: orbit 5200ms linear infinite;
    animation: orbit 5200ms linear infinite;
}

#space .space_field_wrapper:nth-child(8) .space_field.satellite .planet {
    -webkit-animation: planet 5200ms linear infinite;
    animation: planet 5200ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(9) {
    transform: rotateZ(-160deg);
}

#space .space_field_wrapper:nth-child(9) .space_field.satellite {
    -webkit-animation: orbit 5600ms linear infinite;
    animation: orbit 5600ms linear infinite;
}

#space .space_field_wrapper:nth-child(9) .space_field.satellite .planet {
    -webkit-animation: planet 5600ms linear infinite;
    animation: planet 5600ms linear infinite;
    background: #fff;
}

/* 
#space .space_field_wrapper:nth-child(10) {
    transform: rotateZ(-180deg);
}

#space .space_field_wrapper:nth-child(10) .space_field.satellite {
    -webkit-animation: orbit 6000ms linear infinite;
    animation: orbit 6000ms linear infinite;
}

#space .space_field_wrapper:nth-child(10) .space_field.satellite .planet {
    -webkit-animation: planet 6000ms linear infinite;
    animation: planet 6000ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(11) {
    transform: rotateZ(-200deg);
}

#space .space_field_wrapper:nth-child(11) .space_field.satellite {
    -webkit-animation: orbit 6400ms linear infinite;
    animation: orbit 6400ms linear infinite;
}

#space .space_field_wrapper:nth-child(11) .space_field.satellite .planet {
    -webkit-animation: planet 6400ms linear infinite;
    animation: planet 6400ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(12) {
    transform: rotateZ(-220deg);
}

#space .space_field_wrapper:nth-child(12) .space_field.satellite {
    -webkit-animation: orbit 6800ms linear infinite;
    animation: orbit 6800ms linear infinite;
}

#space .space_field_wrapper:nth-child(12) .space_field.satellite .planet {
    -webkit-animation: planet 6800ms linear infinite;
    animation: planet 6800ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(13) {
    transform: rotateZ(-240deg);
}

#space .space_field_wrapper:nth-child(13) .space_field.satellite {
    -webkit-animation: orbit 7200ms linear infinite;
    animation: orbit 7200ms linear infinite;
}

#space .space_field_wrapper:nth-child(13) .space_field.satellite .planet {
    -webkit-animation: planet 7200ms linear infinite;
    animation: planet 7200ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(14) {
    transform: rotateZ(-260deg);
}

#space .space_field_wrapper:nth-child(14) .space_field.satellite {
    -webkit-animation: orbit 7600ms linear infinite;
    animation: orbit 7600ms linear infinite;
}

#space .space_field_wrapper:nth-child(14) .space_field.satellite .planet {
    -webkit-animation: planet 7600ms linear infinite;
    animation: planet 7600ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(15) {
    transform: rotateZ(-280deg);
}

#space .space_field_wrapper:nth-child(15) .space_field.satellite {
    -webkit-animation: orbit 8000ms linear infinite;
    animation: orbit 8000ms linear infinite;
}

#space .space_field_wrapper:nth-child(15) .space_field.satellite .planet {
    -webkit-animation: planet 8000ms linear infinite;
    animation: planet 8000ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(16) {
    transform: rotateZ(-300deg);
}

#space .space_field_wrapper:nth-child(16) .space_field.satellite {
    -webkit-animation: orbit 8400ms linear infinite;
    animation: orbit 8400ms linear infinite;
}

#space .space_field_wrapper:nth-child(16) .space_field.satellite .planet {
    -webkit-animation: planet 8400ms linear infinite;
    animation: planet 8400ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(17) {
    transform: rotateZ(-320deg);
}

#space .space_field_wrapper:nth-child(17) .space_field.satellite {
    -webkit-animation: orbit 8800ms linear infinite;
    animation: orbit 8800ms linear infinite;
}

#space .space_field_wrapper:nth-child(17) .space_field.satellite .planet {
    -webkit-animation: planet 8800ms linear infinite;
    animation: planet 8800ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(18) {
    transform: rotateZ(-340deg);
}

#space .space_field_wrapper:nth-child(18) .space_field.satellite {
    -webkit-animation: orbit 9200ms linear infinite;
    animation: orbit 9200ms linear infinite;
}

#space .space_field_wrapper:nth-child(18) .space_field.satellite .planet {
    -webkit-animation: planet 9200ms linear infinite;
    animation: planet 9200ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(19) {
    transform: rotateZ(-360deg);
}

#space .space_field_wrapper:nth-child(19) .space_field.satellite {
    -webkit-animation: orbit 9600ms linear infinite;
    animation: orbit 9600ms linear infinite;
}

#space .space_field_wrapper:nth-child(19) .space_field.satellite .planet {
    -webkit-animation: planet 9600ms linear infinite;
    animation: planet 9600ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(20) {
    transform: rotateZ(-380deg);
}

#space .space_field_wrapper:nth-child(20) .space_field.satellite {
    -webkit-animation: orbit 10000ms linear infinite;
    animation: orbit 10000ms linear infinite;
}

#space .space_field_wrapper:nth-child(20) .space_field.satellite .planet {
    -webkit-animation: planet 10000ms linear infinite;
    animation: planet 10000ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(21) {
    transform: rotateZ(-400deg);
}

#space .space_field_wrapper:nth-child(21) .space_field.satellite {
    -webkit-animation: orbit 10400ms linear infinite;
    animation: orbit 10400ms linear infinite;
}

#space .space_field_wrapper:nth-child(21) .space_field.satellite .planet {
    -webkit-animation: planet 10400ms linear infinite;
    animation: planet 10400ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(22) {
    transform: rotateZ(-420deg);
}

#space .space_field_wrapper:nth-child(22) .space_field.satellite {
    -webkit-animation: orbit 10800ms linear infinite;
    animation: orbit 10800ms linear infinite;
}

#space .space_field_wrapper:nth-child(22) .space_field.satellite .planet {
    -webkit-animation: planet 10800ms linear infinite;
    animation: planet 10800ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(23) {
    transform: rotateZ(-440deg);
}

#space .space_field_wrapper:nth-child(23) .space_field.satellite {
    -webkit-animation: orbit 11200ms linear infinite;
    animation: orbit 11200ms linear infinite;
}

#space .space_field_wrapper:nth-child(23) .space_field.satellite .planet {
    -webkit-animation: planet 11200ms linear infinite;
    animation: planet 11200ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(24) {
    transform: rotateZ(-460deg);
}

#space .space_field_wrapper:nth-child(24) .space_field.satellite {
    -webkit-animation: orbit 11600ms linear infinite;
    animation: orbit 11600ms linear infinite;
}

#space .space_field_wrapper:nth-child(24) .space_field.satellite .planet {
    -webkit-animation: planet 11600ms linear infinite;
    animation: planet 11600ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(25) {
    transform: rotateZ(-480deg);
}

#space .space_field_wrapper:nth-child(25) .space_field.satellite {
    -webkit-animation: orbit 12000ms linear infinite;
    animation: orbit 12000ms linear infinite;
}

#space .space_field_wrapper:nth-child(25) .space_field.satellite .planet {
    -webkit-animation: planet 12000ms linear infinite;
    animation: planet 12000ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(26) {
    transform: rotateZ(-500deg);
}

#space .space_field_wrapper:nth-child(26) .space_field.satellite {
    -webkit-animation: orbit 12400ms linear infinite;
    animation: orbit 12400ms linear infinite;
}

#space .space_field_wrapper:nth-child(26) .space_field.satellite .planet {
    -webkit-animation: planet 12400ms linear infinite;
    animation: planet 12400ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(27) {
    transform: rotateZ(-520deg);
}

#space .space_field_wrapper:nth-child(27) .space_field.satellite {
    -webkit-animation: orbit 12800ms linear infinite;
    animation: orbit 12800ms linear infinite;
}

#space .space_field_wrapper:nth-child(27) .space_field.satellite .planet {
    -webkit-animation: planet 12800ms linear infinite;
    animation: planet 12800ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(28) {
    transform: rotateZ(-540deg);
}

#space .space_field_wrapper:nth-child(28) .space_field.satellite {
    -webkit-animation: orbit 13200ms linear infinite;
    animation: orbit 13200ms linear infinite;
}

#space .space_field_wrapper:nth-child(28) .space_field.satellite .planet {
    -webkit-animation: planet 13200ms linear infinite;
    animation: planet 13200ms linear infinite;
    background: #fff;
}

#space .space_field_wrapper:nth-child(29) {
    transform: rotateZ(-560deg);
}

#space .space_field_wrapper:nth-child(29) .space_field.satellite {
    -webkit-animation: orbit 13600ms linear infinite;
    animation: orbit 13600ms linear infinite;
}

#space .space_field_wrapper:nth-child(29) .space_field.satellite .planet {
    -webkit-animation: planet 13600ms linear infinite;
    animation: planet 13600ms linear infinite;
    background: #fff;
} */

@-webkit-keyframes orbit {
    0% {
        transform: translate(-50%, -50%) rotateY(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateY(360deg);
    }
}

@keyframes orbit {
    0% {
        transform: translate(-50%, -50%) rotateY(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateY(360deg);
    }
}

@-webkit-keyframes planet {
    0% {
        transform: translate(-50%, -50%) rotateY(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateY(-360deg);
    }
}

@keyframes planet {
    0% {
        transform: translate(-50%, -50%) rotateY(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateY(-360deg);
    }
}