body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #000;
    background-image: url('./earth.jpg');
    background-size: cover;
}

.container {
    perspective: 800px;
}

.globe {
    width: 500px;
    height: 500px;
    border-radius: 50%;
}

.orbit {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    transform-style: preserve-3d;
}

.word {
	text-shadow: 1px 1px 2px black;
    font-size: 48px;
    padding: 8px;
	text-align: center;
    border-radius: 4px;
    position: absolute;
    transform-style: preserve-3d;
}

.en {
    color: red;
}

.he {
	color: blue;
}

.ru {
	color: yellow;
}

#word1 { 
    animation: fly1 10s linear infinite alternate;
}


#word2 { 
    animation: fly2 7s linear infinite alternate;
}


#word3 { 
    animation: fly3 13s linear infinite alternate;
}

@keyframes fly1 {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    25% {
        transform: translate3d(-150px, -150px, 0);
    }
    50% {
        transform: translate3d(-200px, -50px, 0);
    }
    75% {
        transform: translate3d(150px, -100px, 0);
    }
}

@keyframes fly2 {
    0%, 100% {
        transform: translate3d(-200, -200, 0);
    }
    25% {
        transform: translate3d(152px, 80px, 0);
    }
    50% {
        transform: translate3d(-137px, -70px, 0);
    }
    75% {
        transform: translate3d(80px, -120px, 0);
    }
}

@keyframes fly3 {
    0%, 100% {
        transform: translate3d(200, 200, 200);
    }
    25% {
        transform: translate3d(242px, 100px, 0);
    }
    50% {
        transform: translate3d(-300px, -80px, 0);
    }
    75% {
        transform: translate3d(220px, -150px, 0);
    }
}