:root { --length: 5s}
.undraw {background:#000 }
.undraw div { width: 98vw; text-align: center}

.undraw svg { height: 100vh; width: 80vw}

circle { animation: cloud calc(var(--length));animation-delay:40ms}

.rocket { animation: fly calc(var(--length))}

@keyframes fly {
    0% {  transform:translateY(0) rotate(0deg)}
    1% { transform:translateY(0) rotate(.1deg)}
    2% { transform:translateY(0) rotate(-.1deg)}
    3% { transform:translateY(0) rotate(.2deg)}
    4% { transform:translateY(0) rotate(-.2deg)}
    5% { transform:translateY(0) rotate(.3deg)}
    6% { transform:translateY(-1px) rotate(-.3deg)}
    7% { transform:translateY(-3px) rotate(-.4deg)}
    8% { transform:translateY(-4px) rotate(-.4deg)}
    9% { transform:translateY(-6px) rotate(-.5deg)}
    10% { transform:translateY(-10px) rotate(.5deg)}
    13% { transform:translateY(-13px) rotate(0deg)}
    30% { transform:translateY(0)}
    100% { transform:translateY(-490vh)}
}

.big-cloud { width: 20px; animation: cloud calc(var(--length))}

@keyframes cloud {
    0% {  transform:translateY(0) rotate(0deg)}
    1% { transform:translateY(0) rotate(-.1deg)}
    2% { transform:translateY(0) rotate(.1deg)}
    3% { transform:translateY(0) rotate(-.2deg)}
    4% { transform:translateY(0) rotate(.2deg)}
    5% { transform:translateY(0) rotate(-.3deg)}
    6% { transform:translateY(1px) rotate(.3deg)}
    7% { transform:translateY(3px) rotate(-.4deg)}
    8% { transform:translateY(4px) rotate(.4deg)}
    9% { transform:translateY(6px) rotate(.5deg)}
    10% { transform:translateY(10px) rotate(-.5deg)}
    13% { transform:translateY(13px) rotate(0deg)}
    30% { transform:translateY(0)}
    100% { transform:translateY(490vh)}
}

.stars { animation: cloud calc(var(--length));animation-delay:40ms}

.arrow, .cloud-last {
	animation: cloud calc(var(--length)) linear forwards;
	animation-delay:40ms
}

.arrow {
	animation: fly calc(var(--length)) linear forwards;
	animation-delay:740ms
}