* {
    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 4s forwards;
}
.bar1 {
				/*按钮属性*/
				width: 60px;
				/*按钮宽度*/
				height: 30px;
				/*按钮高度*/
				text-align: center;
				/*文字位置居中，还可以设成左、右*/
				font-weight: 700;
				/*文字粗细100-900*/
				color: #FFF;
				/*文字颜色为白色*/
				margin: 0 0px 0px 0;
				/*外边距设置，上、右、下、左*/
				position: relative;
				/*相对正常位置进行定位*/
				overflow: hidden;
				/*内容溢出时会被修剪，并且其余内容是不可见的*/
				outline: none;
				/*字的边框没有，如果有就要添加相关文字边框属性，包括颜色，样式，线粗*/
				border: 0px solid #FFF;
				/*按钮边框为白色线宽为0*/
				background: darkcyan;
				/*设计按钮颜色*/
				font-size: 10px;
				/*设置文字尺寸*/
				border-radius: 10px;
				/*设置按钮边框圆角尺寸*/
				opacity: 0;
				animation: 5s botton1 1s forwards;
			}


.ball1 {/*火星*/
	-webkit-transform:scale(1);/**/
	-moz-transform:scale(1);
	-o-transform:scale(1);
		width: 14vw auto;/*按钮宽度*/
		height: 14vh;/*按钮高度*/
		margin: 0 0px 0px 0;/*外边距设置，上、右、下、左*/
		outline: none;/*字的边框没有，如果有就要添加相关文字边框属性，包括颜色，样式，线粗*/
		border: 0px solid #FFF;/*按钮边框为白色线宽为0*/
		border-radius: 10px;/*设置按钮边框圆角尺寸*/
		opacity: 0;
		animation: 5s botton2 11s forwards;
		-webkit-transition-duration: 0.5s;/*代表safari、chrome浏览器变化的秒数*/
		-moz-transition-duration: 0.5s;/*代表firefox浏览器*/
		-o-transition-duration: 0.5s;/*代表Opera浏览器*/
	}
.ball1:active{
		position: relative;
		top:3px;
		left:3px;/*按钮按下的边框差异*/
}
.ball1:hover{
    -webkit-transform:scale(1.4);
    -moz-transform:scale(1.4);
    -o-transform:scale(1.4);  
} 
@keyframes botton1{
	   0%  {opacity: 0;}
	  25%  {opacity: 0.25;}
	  50%  {opacity: 0.5;}
	  100% {opacity: 1;}
}
.ball2 {/*土星*/
	-webkit-transform:scale(1);/**/
	-moz-transform:scale(1);
	-o-transform:scale(1);
		width: 15vw auto;/*按钮宽度*/
		height: 15vh;/*按钮高度*/
		margin: 0 0px 0px 0;/*外边距设置，上、右、下、左*/
		outline: none;/*字的边框没有，如果有就要添加相关文字边框属性，包括颜色，样式，线粗*/
		border: 0px solid #FFF;/*按钮边框为白色线宽为0*/
		border-radius: 10px;/*设置按钮边框圆角尺寸*/
		opacity: 0;
		animation: 5s botton2 10s forwards;
		-webkit-transition-duration: 0.5s;/*代表safari、chrome浏览器变化的秒数*/
		-moz-transition-duration: 0.5s;/*代表firefox浏览器*/
		-o-transition-duration: 0.5s;/*代表Opera浏览器*/
	}
	.ball2:active{
			position: relative;
			top:3px;
			left:3px;/*按钮按下的边框差异*/
	}
	.ball2:hover{
	    -webkit-transform:scale(1.4);
	    -moz-transform:scale(1.4);
	    -o-transform:scale(1.4);  
	} 
@keyframes botton2{
		0% {opacity: 0;}
	  25%  {opacity: 0.5;}
	  50%  {opacity: 0.7;}
	  100% {opacity: 1;}
}
.ball3 {/*金星*/
	-webkit-transform:scale(1);/**/
	-moz-transform:scale(1);
	-o-transform:scale(1);
		width: 12vw auto;/*按钮宽度*/
		height: 12vh;/*按钮高度*/
		margin: 0 0px 0px 0;/*外边距设置，上、右、下、左*/
		outline: none;/*字的边框没有，如果有就要添加相关文字边框属性，包括颜色，样式，线粗*/
		border: 0px solid #FFF;/*按钮边框为白色线宽为0*/
		border-radius: 10px;/*设置按钮边框圆角尺寸*/
		
		opacity: 0;
		animation: 5s botton3 7s forwards;
		-webkit-transition-duration: 0.5s;/*代表safari、chrome浏览器变化的秒数*/
		-moz-transition-duration: 0.5s;/*代表firefox浏览器*/
		-o-transition-duration: 0.5s;/*代表Opera浏览器*/
	}
	.ball3:active{
			position: relative;
			top:3px;
			left:3px;/*按钮按下的边框差异*/
	}
	.ball3:hover{
	    -webkit-transform:scale(1.4);
	    -moz-transform:scale(1.4);
	    -o-transform:scale(1.4);  
	} 
@keyframes botton3{
		0%   {opacity: 0;}
	  25%  {opacity: 0.5;}
	  50%  {opacity: 0.7;}
	  100% {opacity: 1;}
}
.ball4 {/*水星*/
	-webkit-transform:scale(1);/**/
	-moz-transform:scale(1);
	-o-transform:scale(1);
		width: 10vw auto;/*按钮宽度*/
		height: 10vh;/*按钮高度*/
		margin: 0 0px 0px 0;/*外边距设置，上、右、下、左*/
		outline: none;/*字的边框没有，如果有就要添加相关文字边框属性，包括颜色，样式，线粗*/
		border: 0px solid #FFF;/*按钮边框为白色线宽为0*/
		border-radius: 10px;/*设置按钮边框圆角尺寸*/
		opacity: 0;
		animation: 5s botton4 6s forwards;
		-webkit-transition-duration: 0.5s;/*代表safari、chrome浏览器变化的秒数*/
		-moz-transition-duration: 0.5s;/*代表firefox浏览器*/
		-o-transition-duration: 0.5s;/*代表Opera浏览器*/
	}
	.ball4:active{
			position: relative;
			top:3px;
			left:3px;/*按钮按下的边框差异*/
	}
	.ball4:hover{
	    -webkit-transform:scale(1.4);
	    -moz-transform:scale(1.4);
	    -o-transform:scale(1.4);  
	} 
@keyframes botton4{
		0%   {opacity: 0;}
	  25%  {opacity: 0.25;}
	  50%  {opacity: 0.5;}
	  100% {opacity: 1;}
}
.ball5 {/*木星*/
	-webkit-transform:scale(1);/**/
	-moz-transform:scale(1);
	-o-transform:scale(1);
		width: 18vw auto;/*按钮宽度*/
		height: 18vh;/*按钮高度*/
		margin: 0 0px 0px 0;/*外边距设置，上、右、下、左*/
		outline: none;/*字的边框没有，如果有就要添加相关文字边框属性，包括颜色，样式，线粗*/
		border: 0px solid #FFF;/*按钮边框为白色线宽为0*/
		border-radius: 10px;/*设置按钮边框圆角尺寸*/
		opacity: 0;
		animation: 5s botton5 9s forwards;
		-webkit-transition-duration: 0.5s;/*代表safari、chrome浏览器变化的秒数*/
		-moz-transition-duration: 0.5s;/*代表firefox浏览器*/
		-o-transition-duration: 0.5s;/*代表Opera浏览器*/
	}
	.ball5:active{
			position: relative;
			top:3px;
			left:3px;/*按钮按下的边框差异*/
	}
	.ball5:hover{
	    -webkit-transform:scale(1.4);
	    -moz-transform:scale(1.4);
	    -o-transform:scale(1.4);  
	} 
@keyframes botton5{
		0%   {opacity: 0;}
	  25%  {opacity: 0.25;}
	  50%  {opacity: 0.5;}
	  100% {opacity: 1;}
}

@keyframes rocketTakeOff {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, -30%);
    }
}

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

.bottom-item {
        left: 0;
	    position: fixed;
        bottom: 0;
        /* top 0 就是顶部 */
	    width: 100%;
        z-index: 100;
        background: #343537;
        display: flex;
        justify-content: center;
		
        color: #ffff;
}
.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%);
    }
}