.globe-wrapper{

    position:relative;

    width:500px;
    height:500px;

    margin:auto;

    display:flex;
    justify-content:center;
    align-items:center;

    perspective:1200px;
}


.earth{

    width:220px;
    height:220px;

    border-radius:50%;

    position:relative;

    transform-style:preserve-3d;

    background:
        radial-gradient(circle at 30% 30%,
        #64d8ff,
        #1976d2 55%,
        #0d47a1 100%);

    box-shadow:
    0 0 40px rgba(30,136,229,.5),
    inset -30px -40px 70px rgba(0,0,0,.45);

    /* animation:rotateEarth 30s linear infinite; */

}


.grid{

    position:absolute;
    inset:0;

    border-radius:50%;

    background-image:

    repeating-linear-gradient(
        transparent,
        transparent 17px,
        rgba(255,255,255,.12) 18px
    ),

    repeating-linear-gradient(
        90deg,
        transparent,
        transparent 17px,
        rgba(255,255,255,.12) 18px
    );

    opacity:.45;

    transform:rotateX(70deg);
}


.glow{

    position:absolute;

    width:260px;
    height:260px;

    left:-20px;
    top:-20px;

    border-radius:50%;

    background:#3b82f6;

    filter:blur(70px);

    opacity:.35;

}


.orbit{

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    animation:spin 18s linear infinite;

    transform-style:preserve-3d;

}

.orbit img{

    width:54px;
    height:54px;

    position:absolute;

    background:white;

    padding:8px;

    border-radius:18px;

    box-shadow:

    0 15px 35px rgba(0,0,0,.15);

    transition:.3s;
}

.orbit img:hover{

    transform:scale(1.2);
}

.orbit img:nth-child(1){

    top:-25px;
    left:180px;
}

.orbit img:nth-child(2){

    right:-25px;
    top:180px;
}

.orbit img:nth-child(3){

    bottom:-25px;
    left:180px;
}

.orbit img:nth-child(4){

    left:-25px;
    top:180px;
}



.orbit-2{

    transform:rotateX(75deg);

    animation-duration:25s;

}



@keyframes spin{

    from{

        transform:rotateZ(0deg);
    }

    to{

        transform:rotateZ(360deg);
    }

}

@keyframes rotateEarth{

    from{

        transform:rotateY(0deg);

    }

    to{

        transform:rotateY(360deg);

    }

}



@media(max-width:768px){

.globe-wrapper{

width:340px;
height:340px;

}

.earth{

width:170px;
height:170px;

}

.orbit{

width:300px;
height:300px;

}

.orbit img{

width:44px;
height:44px;

}

}