* {
    margin: 0;
}
:root {
    --main-bg-color: #000203;
}

body {
    width: 100vw;
    height: 100vh;
}
#rocket-animation {
    position: absolute;
    width: 100vw;
    height: 100vh;
    bottom: 100px;
    /*display: none;*/
    z-index: 1000;
}
#rocket-takeoff-wrapper {
  height: 100vh;
  /*animation: 2s rocketTakeOff 1s forwards cubic-bezier(.97,.37,.26,.3);*/

}
#rocket-wrapper {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, 0);
}
#rocket {
    width: 200px;
    height: 200px;
}
#planet {
    position: absolute;
    bottom: -10px;
    width: 100vw;
    z-index: -10;
    animation: 5s earthLeave 2s forwards;
}
#sky {
    position: absolute;
    bottom: -100vh;
    left: -50vw;
    z-index: -20;
    /*background: radial-gradient(circle at center, #0784c2,var(--main-bg-color) 50%);*/
    border-radius: 50%;
    height: 300vh;
    width: 200vw;
    animation: 8s earthLeave 5s forwards;
}

@keyframes rocketTakeOff {
    0% {
        transform: translate(0, 0);    
    }
    100% {
        transform: translate(0, -90%);    
    }
    /*100% {
        transform: translate(0, 0);    
    }*/
   /* 70% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }*/

}

@keyframes earthLeave {
    0% {
        transform: translatey(0);
    }
    100% {
        transform: translatey(100%);
    }
}
.thruster {
    position: relative;
    z-index: -5;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translatex(-11%);
    opacity: 0;
    animation: 500ms fadein 1s forwards;
}

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 100;
    }
}
.flame-wrapper {
    position: relative;
    animation: flicker 600ms ease-in infinite;
}
.flame {
    bottom: 0;
    position: absolute;
    border-radius: 50% 50% 50% 0%;
    transform: rotate(-45deg);
}

.red {
    width: 45px;
    height: 45px;
    background: orangered;
    }
.orange {
    left: 5px;
    width: 35px;
    height: 35px;
    background: orange;
}
.gold {
    left: 10px;
    width: 25px;
    height: 25px;
    background: gold;
}
.white {
    left: 15px;
    width: 15px;
    height: 15px;
    background: lightyellow;
}

@keyframes flicker {
    0% {
      transform: rotate(-1deg);
    }
    20% {
      transform: rotate(2deg) scaleY(1.2);
    }
    40% {
      transform: rotate(-1deg);
    }
    60% {
      transform: rotate(1deg);
    }
    80% {
      transform: rotate(-1deg) scaleY(0.9);
    }
    100% {
      transform: rotate(1deg);
    }
}
.star-wrapper {
    position: absolute;
    height: 100%;
    z-index: -30;
    top: 0;
    animation: 20s moveStars linear infinite;
}
.star {
    position: absolute;
}
.star1 {
    height: 9px;
    width: 9px;
}
.star2 {
    height: 3px;
    width: 3px;
}

@keyframes moveStars {
    0% {
        transform: translatey(0);
    } 
    100% {
        transform: translatey(100%);
    }
}


.add_transform{
   transform:rotate(180deg) !important;
   -ms-transform:rotate(180deg) !important;    /* IE 9 */
   -moz-transform:rotate(180deg) !important;   /* Firefox */
   -webkit-transform:rotate(180deg) !important; /* Safari 和 Chrome */
   -moz-transform-origin: 0 0;
   -webkit-transform-origin:0 0;
   -o-transform-origin:0 0;
}