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

body {
    background: #000203;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
#rocket-animation {
    position: absolute;
    width: 100vw;
    height: 100vh;
}
#rocket-takeoff-wrapper {
  height: 100vh;
  animation: 10s rocketTakeOff 2s 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, -30%);
    }
}

@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%);
    }
}