* {
 padding: 0;
 margin: 0;
 -webkit-box-sizing: border-box;
         box-sizing: border-box;
}

.animation {
 position: relative;
 width: 100%;
 max-width: 1920px;
 height: 100vh;
 max-height: 1024px;
 margin: 0 auto;
 background-image: url(images/stars-2643089_1920.jpg);
 background-repeat: no-repeat;
 background-position: center;
 overflow: hidden;
}

.animation__globe {
 position: absolute;
 background-size: 100%;
 background-repeat: no-repeat;
 border-radius: 50%;
}

.animation__sun {
 left: 20%;
 top: 20%;
 width: 20px;
 height: 20px;
 background-color: yellow;
 -webkit-box-shadow: 0px 0px 8px 8px yellow;
         box-shadow: 0px 0px 8px 8px yellow;
 -webkit-transform: scale(1);
     -ms-transform: scale(1);
         transform: scale(1);
 border: none;
 z-index: 1;
}

.animation__sun-title {
 position: fixed;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
 opacity: 0;
 scale: 1;
 z-index: 10;
 font-size: 100px;
}

.animation__bigGlobe {
 left: -20%;
 bottom: -50%;
 width: 800px;
 height: 800px;
 background-image: url(images/world.jpg);
 background-repeat: no-repeat;
 z-index: 2;
 -webkit-transform: scale(1);
     -ms-transform: scale(1);
         transform: scale(1);
}

.animation__bigMoon {
 right: 30%;
 top: 10%;
 width: 100px;
 height: 100px;
 background-image: url(images/mars.svg);
 background-size: 102%;
 background-position: 42%;
 ;
 -webkit-transform: scale(1);
 ;
     -ms-transform: scale(1);
 ;
         transform: scale(1);
}

.animation__smallMoon {
 right: 10%;
 top: 75%;
 width: 50px;
 height: 50px;
 background-image: url(images/mars.svg);
 background-size: 102%;
 background-position: 0% 46%;
 -webkit-transform: scale(1);
     -ms-transform: scale(1);
         transform: scale(1);
}

.animation__satellite {
 position: absolute;
 background-size: 100%;
 background-repeat: no-repeat;
 z-index: 3;
}

.animation__satellite img {
 width: 100%;
}

.animation__telescope {
 left: 100%;
 top: 100%;
 width: 150px;
 height: 150px;
}

.animation__rocket {
 left: -10%;
 top: 120%;
 width: 80px;
 height: 50px;
 -webkit-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
         transform: rotate(-90deg);
}

.animation__rocket2 {
 left: 50%;
 top: -20%;
 width: 80px;
 height: 50px;
 -webkit-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
         transform: rotate(90deg);
}

.animation__meteor1 {
 width: 30px;
 height: 30px;
 left: 100%;
 top: 90%;
}

.animation__meteor2 {
 width: 200px;
 height: 200px;
 left: 60%;
 top: 20%;
 -webkit-transform-origin: 50% 50%;
     -ms-transform-origin: 50% 50%;
         transform-origin: 50% 50%;
 -webkit-transform: scale(0.01);
     -ms-transform: scale(0.01);
         transform: scale(0.01);
 z-index: 4;
}

.animation__escapeRocket {
 width: 100px;
 -webkit-transform: rotate(-20deg);
     -ms-transform: rotate(-20deg);
         transform: rotate(-20deg);
}

.animation__escapeRocket--one {
 left: 50%;
 top: -20%;
}

.animation__escapeRocket--two {
 left: 65%;
 top: -20%;
}

.animation__escapeRocket--three {
 left: 80%;
 top: -20%;
}

.animation__escapeRocket--four {
 left: 101%;
 top: 55%;
 -webkit-transform: rotate(9deg);
     -ms-transform: rotate(9deg);
         transform: rotate(9deg);
}

.animation__escapeRocket--five {
 left: 101%;
 top: 60%;
 -webkit-transform: rotate(9deg);
     -ms-transform: rotate(9deg);
         transform: rotate(9deg);
}

.animation__escapeRocket--six {
 left: 101%;
 top: 70%;
 -webkit-transform: rotate(9deg);
     -ms-transform: rotate(9deg);
         transform: rotate(9deg);
}

.animation__escapeRocket--seven {
 left: 101%;
 top: 80%;
 -webkit-transform: rotate(9deg);
     -ms-transform: rotate(9deg);
         transform: rotate(9deg);
}

.animation__escapeRocket--eight {
 left: 101%;
 top: 20%;
 -webkit-transform: rotate(5deg);
     -ms-transform: rotate(5deg);
         transform: rotate(5deg);
}

.animation__escapeRocket--nine {
 left: 101%;
 top: 30%;
 -webkit-transform: rotate(5deg);
     -ms-transform: rotate(5deg);
         transform: rotate(5deg);
}

.animation__escapeRocket--ten {
 left: 101%;
 top: 50%;
 -webkit-transform: rotate(5deg);
     -ms-transform: rotate(5deg);
         transform: rotate(5deg);
}

@media(max-width:1366px) {
 .animation__bigGlobe {
  left: -30%;
  bottom: -70%;
 }
}

@media(max-width:1024px) {
 .animation__bigGlobe {
  left: -60%;
  bottom: -80%;
 }
}

@media(max-width:800px) {
 .animation__bigGlobe {
  left: -70%;
  bottom: -100%;
 }
}

@media(max-width:600px) {
 .animation__bigGlobe {
  left: -50%;
  bottom: -80%;
 }
}