/* section */
section{
    height: 100vh;
    position: relative;
}

@keyframes rocket-movement { 100% {transform: translate(1200px,-600px);} }

@keyframes spin-earth{ 100% {transform:rotate(-360deg); transition: transform 20s; } }


@keyframes move-astronaut{
    100% {transform:translate(-100px, -100px); }
}

@keyframes rotate-astronaut{
    100% {transform:rotate(-720deg); }
}

@keyframes glow-star{
    40% { opacity: 0.3;  }
    90%,100% {opacity: 1; transform: scale(1.2); border-radius: 999999px;}
}

#container {
  color:#fff;
  font-size:60px;
  font-weight:bold;
  width:100%;
  display:block;
}

#flip {
  height:100px;
  overflow:hidden;
}

#flip .flip_box > div > div {
  color:#fff;
  padding:2px 12px;
  height:100px;
  margin-bottom:20px;
  display:inline-block;
}

#flip .flip_box{
  animation: show 5s linear infinite;
}

#flip .flip_box div:nth-child(1) div {
    background:#4ec7f3;
}

#flip .flip_box div:nth-child(2) div{
  background:#42c58a;
}

#flip .flip_box div:nth-child(3) div {
  background:#DC143C;
}

#flip .flip_box div:nth-child(4) div {
    background:#4ec7f3;
}

@keyframes show {
  0% {margin-top:-360px;}
  5% {margin-top:-240px;}
  33% {margin-top:-240px;}
  38% {margin-top:-120px;}
  66% {margin-top:-120px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-360px;}
}
.bg-purple{
    background: url(http://salehriaz.com/404Page/img/bg_purple.png);
    background-repeat: repeat-x;
    background-size: cover;
    background-position: left top;
    height: 100%;
    overflow: hidden;
    
}

.central-body{
    text-align: center;
    position: absolute;
    z-index: 80;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.objects img{
    pointer-events: none;
}

.object_rocket{
    width: 70px;
    z-index: 95;
    position: absolute;
    transform: translateX(-50px);
    top: 75%;
    pointer-events: none;
    animation: rocket-movement 150s linear infinite both running;
}

.object_earth{
    width: 100px;
    position: absolute;
    top: 20%;
    left: 15%;
    z-index: 90;
    animation: spin-earth 80s infinite linear both;
}

.object_moon{
    width: 80px;
    position: absolute;
    top: 12%;
    left: 25%;
}

.object_astronaut{
    width: 150px;
    animation: rotate-astronaut 200s infinite linear both alternate;
}

.box_astronaut{
    z-index: 110 !important;
    position: absolute;
    top: 60%;
    right: 20%;
    will-change: transform;
    animation: move-astronaut 50s infinite linear both alternate;
}

.object_deco{
    position: absolute;
    width: 180px;
    top: 30%;
    right: 20%;
    transform: rotate(-30deg);
    animation: bounce 6s infinite;
}
@keyframes bounce {
    0%,100%{ transform:translate(-30deg); }
    25%{ transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
    50%{ transform:translateY(-20px) rotate(3deg) scale(1.1);  }
}

.deco1{
    position: absolute;
    z-index: 80;
    bottom: 20%;
    left: 20%;
    font-family: 'CookieRun-Regular';
    transform: rotate(20deg);
}
.deco1 h1 {
    font-size:40px;
}

.deco1 h1 span { display:inline-block; animation:float .5s ease-in-out infinite; }
@keyframes float {
    0%,100%{ transform:none; }
    33%{ transform:translateY(-1px) rotate(-2deg); }
    66%{ transform:translateY(1px) rotate(2deg); }
}
.deco1:hover span { animation:bounce .6s; }

.deco1 span:nth-child(4n) { color:hsl(50, 72%, 74%); text-shadow:1px 1px hsl(50, 75%, 45%), 2px 2px hsl(50, 45%, 45%), 3px 3px hsl(50, 45%, 45%), 4px 4px hsl(50, 75%, 45%); }
.deco1 span:nth-child(4n-1) { color:hsl(135, 43%, 76%); text-shadow:1px 1px hsl(135, 35%, 45%), 2px 2px hsl(135, 35%, 45%), 3px 3px hsl(135, 35%, 45%), 4px 4px hsl(135, 35%, 45%); }
.deco1 span:nth-child(4n-2) { color:hsl(154, 32%, 64%); text-shadow:1px 1px hsl(155, 25%, 50%), 2px 2px hsl(155, 25%, 50%), 3px 3px hsl(155, 25%, 50%), 4px 4px hsl(140, 25%, 50%); }
.deco1 span:nth-child(4n-3) { color:hsl(30, 52%, 71%); text-shadow:1px 1px hsl(30, 45%, 50%), 2px 2px hsl(30, 45%, 50%), 3px 3px hsl(30, 45%, 50%), 4px 4px hsl(30, 45%, 50%); }

.deco1 h1 span:nth-child(2){ animation-delay:.05s; }
.deco1 h1 span:nth-child(3){ animation-delay:.1s; }
.deco1 h1 span:nth-child(4){ animation-delay:.15s; }
.deco1 h1 span:nth-child(5){ animation-delay:.2s; }
.deco1 h1 span:nth-child(6){ animation-delay:.25s; }
.deco1 h1 span:nth-child(7){ animation-delay:.3s; }
.deco1 h1 span:nth-child(8){ animation-delay:.35s; }
.deco1 h1 span:nth-child(9){ animation-delay:.4s; }

.stars{
    height: 100%;
    background: url(../img/overlay_stars.svg);
    background-repeat: repeat;
    background-size: contain;
    background-position: left top;
}

.glowing_stars .star{
    position: absolute;
    border-radius: 100%;
    background-color: #fff;
    width: 3px;
    height: 3px;
    opacity: 0.3;
    will-change: opacity;
}

.glowing_stars .star:nth-child(1){
    top: 80%;
    left: 25%;
    animation: glow-star 2s infinite ease-in-out alternate 1s;
}
.glowing_stars .star:nth-child(2){
    top: 20%;
    left: 40%;
    animation: glow-star 2s infinite ease-in-out alternate 3s;
}
.glowing_stars .star:nth-child(3){
    top: 25%;
    left: 25%;
    animation: glow-star 2s infinite ease-in-out alternate 5s;
}
.glowing_stars .star:nth-child(4){
    top: 75%;
    left: 80%;
    animation: glow-star 2s infinite ease-in-out alternate 7s;
}
.glowing_stars .star:nth-child(5){
    top: 90%;
    left: 50%;
    animation: glow-star 2s infinite ease-in-out alternate 9s;
}
.glowing_stars .star:nth-child(6){
    top: 40%;
    left: 30%;
    animation: glow-star 2s infinite ease-in-out alternate 5s;
}
.glowing_stars .star:nth-child(7){
    top: 60%;
    left: 60%;
    animation: glow-star 2s infinite ease-in-out alternate 7s;
}
.glowing_stars .star:nth-child(8){
    top: 70%;
    left: 20%;
    animation: glow-star 2s infinite ease-in-out alternate 9s;
}
.glowing_stars .star:nth-child(9){
    top: 30%;
    left: 50%;
    animation: glow-star 2s infinite ease-in-out alternate 7s;
}
.glowing_stars .star:nth-child(10){
    top: 40%;
    left: 40%;
    animation: glow-star 2s infinite ease-in-out alternate 9s;
}

/* 별똥별 애니메이션 */
#shooting span{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 1)  ;
    animation:  shooting 5s linear infinite;
    opacity: 0;
}
#shooting span::before{
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 5px;
    border-radius: 3px 0 0 3px;
    background: linear-gradient(90deg, #fff, transparent);
}
@keyframes shooting {
    0%
    {
        transform: rotate(315deg) translateX(0);
        opacity: 0;
    }
    10%{opacity: 1;}
    70%{opacity: 1;}
    100%
    {
        transform: rotate(315deg) translateX(-800px);
        opacity: 0;

    }
}
#shooting span:nth-child(1){
    top: 0;
    right: 1300px;
    left:initial;
    animation-delay:0 ;
    animation-duration: 5s;
}

#shooting span:nth-child(2){
    top: 0;
    right: 120px;
    left:initial;
    animation-delay:0.2s;
    animation-duration: 3s;
}

#shooting span:nth-child(3){
    top: 80px;
    right: 30px;
    left:initial;
    animation-delay:0.4s ;
    animation-duration: 4s;
}

#shooting span:nth-child(4){
    top: 0;
    right: 220px;
    left:initial;
    animation-delay:0.6s;
    animation-duration: 2s;
}
#shooting span:nth-child(5){
    top: 0;
    right: 400px;
    left:initial;
    animation-delay:0.8s;
    animation-duration: 4s;
}
#shooting span:nth-child(6){
    top: 0;
    right: 600px;
    left:initial;
    animation-delay:1s ;
    animation-duration: 3s;
}



/* 반응형 */
@media screen and (max-width:1600px){
    .object_deco{top: 23%; right: 10%;}

}

@media screen and (max-width:1440px){
    

}

@media screen and (max-width:1280px){
    .central-body{z-index: 98; width: 100%;}
    .deco1 h1{font-size: 36px;}
    .box_astronaut{z-index:95!important;}
    .object_astronaut{width:80px; z-index:95 !important;}
    .object_deco{width: 120px;}

    #container {font-size: 50px;}
    #flip{height: 80px;}
    #flip .flip_box > div > div{height: 80px; line-height: 80px;}

    @keyframes show {
        0% {margin-top:-300px;}
        5% {margin-top:-200px;}
        33% {margin-top:-200px;}
        38% {margin-top:-100px;}
        66% {margin-top:-100px;}
        71% {margin-top:0px;}
        99.99% {margin-top:0px;}
        100% {margin-top:-300px;}
    }

}

@media screen and (max-width:1024px){
    #shooting span:nth-child(4){display: none;}

}

@media screen and (max-width:960px){
    .object_earth {width: 80px;}
    .deco1{left:10%;}
    .box_astronaut{top: auto; right: 5%; bottom: 18%;}

}

@media screen and (max-width:769px){

}

@media screen and (max-width:560px){
    #container{font-size: 40px;}
    #flip{height: 65px;}
    #flip .flip_box > div > div{height: 65px; line-height: 65px;}

    @keyframes show {
        0% {margin-top:-255px;}
        5% {margin-top:-170px;}
        33% {margin-top:-170px;}
        38% {margin-top:-85px;}
        66% {margin-top:-85px;}
        71% {margin-top:0px;}
        99.99% {margin-top:0px;}
        100% {margin-top:-255px;}
    }

    .deco1 h1{font-size: 30px;}
    .object_deco {width: 100px; top: 15%;}

}

@media screen and (max-width:480px){
    #container{font-size: 30px;}
    #flip{height: 50px;}
    #flip .flip_box > div > div {height: 50px; line-height: 50px;}

    @keyframes show {
        0% {margin-top:-210px;}
        5% {margin-top:-140px;}
        33% {margin-top:-140px;}
        38% {margin-top:-70px;}
        66% {margin-top:-70px;}
        71% {margin-top:0px;}
        99.99% {margin-top:0px;}
        100% {margin-top:-210px;}
    }

    .object_rocket{width: 50px;}
    .object_earth {width: 50px; top: 18%; left: 12%;}
    .object_moon {width: 60px; top: 10%; left: 20%;}
    .object_deco {width: 80px;}
    .deco1 h1{font-size: 24px;}
    .object_astronaut {width: 60px;}
   
}

@media screen and (max-width:360px){


}