@charset "UTF-8";


.container{
    width: 100%;
    min-height: 100vh;
    display: flex;
    position: relative;
    overflow: hidden;
}

.blast {
	animation: floatUp 2s linear infinite;
	animation-delay: 1s;
	visibility: hidden;
	position: relative;
	z-index: -1;
}

.rocket {
	animation: floatLeftRight 2s linear infinite alternate;
	position: relative;
	z-index: 1000;
}

.dots{
    position: absolute;
    display: flex;
    top: 0px;
    left: 0px;
    z-index: -5;

}
.dots span{
    position: relative;
    width: 10px;
    height: 10px;
    background: #fa4b4b;
    border-radius: 50%;
    margin: 0 20px;
    box-shadow: 0 0 10px #ff7f50,
    0 0 20px #ff6347,
    0 0 30px #ff4500,
    0 0 40px #ff6347,
    0 0 50px #ff7f50,
    0 0 60px #ff6347,
    0 0 70px #ff4500,
    0 0 80px #ff6347;
    animation: moveUp linear infinite;
    animation-duration: calc( 150s / var(--i));
}
.dots span:nth-child(even){
    animation-delay: 0.2s;
}


@keyframes moveUp{
    0%{
        transform: translateY(100vh) scale(0.5);
    }
    25%{
        transform: translateY(75vh) scale(0.7);
    }
    50%{
        transform: translateY(50vh) scale(1.5);
    }
    75%{
        transform: translateY(25vh) scale(0.7);
    }
    100%{
        transform: translateY(-10vh) scale(0.5);
    }
}

@keyframes floatLeftRight {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-300px);
	}
}

@keyframes floatUp {
	0% {
		visibility: visible;
		transform: translateY(0px);
	}
	100% {
		transform: translateY(-1500px);
	}
}