html,body {
    height: 100%;
    width:100%;
    overflow: hidden;
}
  
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    padding:0;
    margin:0;
    font-family: 'Play', sans-serif;
    font-weight: 300;
}

.hide{
    position: absolute;
    background-color: #111111;
    background:#111111;
    width:1000%;
    height:1000%;
    z-index:999;
}

.hide1{
    left:-1000%;
}

.hide2{
    right:-1000%;
}

.hide3{
    top:-1000%;
}

.hide4{
    bottom:-1000%;
}

.main{
    width:100%;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.container{
    width:100%;
    height:100%;
    max-width:850px;
    max-height:580px;
    background:black;
    color:white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position:relative;
}

.click{
    font-size:42px;
    border:1px solid white;
    border-radius: 50%;
    height:200px;
    width:200px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
    transition: 0.5s;
}

.click:hover{
    font-size:50px;
    height:250px;
    width:250px;
}

.click-active{
    font-size:50px;
    height:250px;
    width:250px;
    border:1px solid white;
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
    transition: 1s;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.click-grow{
    font-size:50px;
    height:250px;
    width:250px;
    border:1px solid white;
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-around;
    transition: 1s;
    display: flex;
    align-items: center;
    justify-content: space-around;
    animation: grow1 1.5s linear 0s 1;
    background-color: white;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

@keyframes grow1 {
    from{
        height:500px;
        width:500px;
    }to{
        height:0px;
        width:0px;
    }
}


.click-new{
    width:5px;
    height:5px;
    background:white;
    border-radius: 50%;
    animation: fil 0.5s linear 0s 1;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

@keyframes fil {
   0%{width:5px; height:5px;}
   100%{width:100%; height:100%;}
}


.you{
    opacity: 0;
    animation: you 1.5s linear 0s 1;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    width:25%;
}

@keyframes you {
    0%{opacity: 0;}
    100%{opacity: 1;}
 }


 .earth{
     width:1000px;
     height:1000px;
     background:black;
     display: flex;
     align-items: center;
     justify-content: space-around;
     border-radius: 50%;
 }

 .earth-show{
    width:3000px;
    height:3000px;
    background:black;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 50%;
    animation: earth 5s linear 0s 1;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    border:1px solid white;
 }

 @keyframes earth {
    0%{width:10000px;height:10000px;}
    100%{width:500px;height:500px;}
 }

 .absolute{
    height:250%;
    position: absolute;
 }

 .one1{
    z-index: 9;
 }

 .two2{
    z-index: 8;
 }

 .three3{
    z-index: 7;
 }

 .four4{
    z-index: 6;
 }

 .five5{
    z-index: 5;
 }

 .six6{
    z-index: 4;
 }

 .seven7{
    z-index: 3;
 }

 .eight8{
    z-index: 2;
 }

 .nine9{
    z-index: 1;

 }


 .one{
     height:250%;
     position:absolute;
     animation: one 3s linear 0s 1,one2 1.5s linear 4.5s 1, oneopa 0.8s linear 6.2s 1,  oneby 1.4s linear 9.7s 1, oneblack 1.5s linear 11.7s 1,oness 1s linear 15.1s 1, onelast 1.5s linear 17s 1,laste 2s linear 19.7s 1,earthbyby 3s linear 24s 1;
     animation-fill-mode: forwards;
     -o-animation-fill-mode: forwards;
     -webkit-animation-fill-mode: forwards;
     z-index: 9;
 }

 @keyframes one {
    0%{height:250%;}
    100%{height:80%;}
 }

 @keyframes one2 {
    0%{height:80%;}
    100%{height:22%;}
 }

 @keyframes oneopa {
    0%{opacity: 1;}
    100%{opacity: 0.1;}
 }

 @keyframes oneby {
    0%{height:22%;}
    100%{height:12%;}
 }

 @keyframes oneblack {
    0%{opacity:0.1;}
    100%{opacity: 0.7;}
 }

 
 @keyframes oness {
    0%{height:12%;}
    100%{height:8%;}
 }

 
 @keyframes onelast {
    0%{opacity:0.7;}
    100%{opacity: 0.1;}
 }

 @keyframes laste {
    0%{height:8%;}
    100%{height:1.5%;}
 }

 @keyframes earthbyby {
   0%{height:1.5%;}
   100%{height:0%;}
}

 

 .earthtxt{
     position:absolute;
     width:30%;
     z-index:99;
     opacity: 0;
     animation: earthtxt 1s linear 0s 1,earthtxt2 1.7s linear 1.5s 1;
     animation-fill-mode: forwards;
     -o-animation-fill-mode: forwards;
     -webkit-animation-fill-mode: forwards;
 }

 @keyframes earthtxt {
    0%{opacity: 0;}
    100%{opacity: 1;}
 }

 @keyframes earthtxt2 {
    0%{ width:30%;}
    100%{ width:0%;}
 }



 

 .two{
    height:250%;
    position:absolute;
    animation: two 2s linear 0s 1,two2 1.2s linear 5.9s 1,two3 1.5s linear 7.9s 1,two4 1s linear 11.2s 1,two5  1.5s linear 14s 1,two6 2s linear 15.8s 1,two7  1s linear 17s 1, twoby 3s linear 21.4s 1;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    z-index: 8;
}

@keyframes two {
   0%{height:250%;}
   100%{height:85%;}
}

@keyframes two2 {
    0%{height:85%;}
   100%{height:50%;} 
}

@keyframes two3 {
    0%{opacity: 1;}
   100%{opacity: 0.25;} 
}


@keyframes two4 {
    0%{height:50%;}
   100%{height:38%;} 
}

@keyframes two5 {
    0%{opacity: 0.25;}
   100%{opacity: 0.5;} 
}

@keyframes two6 {
    0%{height:38%;}
   100%{height:4.1%;} 
}

@keyframes two7 {
   0%{opacity: 0.5;}
  100%{opacity: 0.1;} 
}

@keyframes twoby {
   0%{height:4.1%;}
  100%{height:0%;} 
}



.uranustxt{
    position:absolute;
    width:37%;
    z-index:99;
    opacity: 0;
    animation: uranustxt 1s linear 0.6s 1,uranustxt2 1.4s linear 3.2s 1;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

@keyframes uranustxt {
   0%{opacity: 0;}
   100%{opacity: 1;}
}

@keyframes uranustxt2 {
   0%{ width:37%;}
   100%{ width:0%;}
}



.three{
    height:250%;
    position:absolute;
    animation: three 1.8s linear 0s 1,three2 1s linear 5.8s 1,three3  1.5s linear 8s 1,three4 2s linear 10.5s 1, three5  1s linear 12s 1,threeby 3s linear 16s 1;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    z-index: 7;
}

@keyframes three {
   0%{height:250%;}
   100%{height:87%;}
}

@keyframes three2 {
    0%{height:87%;}
    100%{height:69%;}
 }

 @keyframes three3 {
    0%{opacity: 1;}
    100%{opacity: 0.3;}
 }
 
 @keyframes three4 {
    0%{height:69%;}
    100%{height:6.5%;}
 }

 
 @keyframes threeby {
   0%{height:6.5%}
   100%{height:0%}
} 






.saturntxt{
    position:absolute;
    width:41%;
    z-index:99;
    opacity: 0;
    animation: saturntxt 1s linear 0.6s 1,saturntxt2 1.1s linear 3.1s 1;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

@keyframes saturntxt {
   0%{opacity: 0;}
   100%{opacity: 1;}
}

@keyframes saturntxt2 {
    0%{width: 41%;}
    100%{width: 0%;}
 }



 .four{
    height:250%;
    position:absolute;
    animation: four 2s linear 0s 1,four2 2s linear 5.6s 1,four3  1s linear 7.4s 1,fourby 3s linear 11s 1;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    z-index: 6;
}

@keyframes four {
   0%{height:250%;}
   100%{height:87%;}
}

@keyframes four2 {
    0%{height:87%;}
    100%{height:8.5%;}
 }

 @keyframes four3 {
   0%{opacity: 1;}
   100%{opacity: 0.3;}
}

@keyframes fourby {
   0%{height:8.5%;}
   100%{height:0%;}
}

.jupitertxt{
    position:absolute;
    width:41%;
    z-index:999;
    opacity: 0;
    animation: jupitertxt 1s linear 0.6s 1,jupitertxt2 2.1s linear 3s 1;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

@keyframes jupitertxt {
    0%{opacity: 0;}
    100%{opacity: 1;}
 }

 
@keyframes jupitertxt2 {
    0%{width: 41%;}
    100%{width: 0%;}
 }





 .sun{
    height:250%;
    position:absolute;
    animation: sun 3s linear 0s 1,sun2 1s linear 5.6s 1,sunby 3s linear 6.4s 1;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    z-index: 5;
}

@keyframes sun {
   0%{height:250%;}
   100%{height:85%;}
}

@keyframes sunby {
   0%{height:85%;}
   100%{height:0%;}
}

.suntxt{
   position:absolute;
   width:27%;
   z-index:999;
   opacity: 0;
   animation: suntxt 1s linear 0.6s 1,suntxt2 3s linear 3s 1;
   animation-fill-mode: forwards;
   -o-animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards;
}

@keyframes suntxt {
   0%{opacity: 0;}
   100%{opacity: 1;}
}


@keyframes suntxt2 {
   0%{width: 27%;}
   100%{width: 0%;}
}



.six{
   height:250%;
   position:absolute;
   animation: six 5s linear 0.7s 1,six2 1s linear 5.6s 1,sixby 3s linear 7.7s 1;
   animation-fill-mode: forwards;
   -o-animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards;
   z-index: 4;
}

@keyframes six {
  0%{height:250%;}
  100%{height:85%;}
}


@keyframes sixby {
   0%{height:85%;}
   100%{height:0%;}
}


.waytxt{
   position:absolute;
   width:35%;
   z-index:999;
   opacity: 0;
   animation: way 1s linear 1.3s 1,way2 3s linear 4.2s 1;
   animation-fill-mode: forwards;
   -o-animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards;
}

@keyframes way {
   0%{opacity: 0;}
   100%{opacity: 1;}
}



@keyframes way2 {
   0%{width: 35%;}
   100%{width: 0%;}
}



.cosmos{
   position:absolute;
   width:75%;
   z-index:999;
   opacity: 0;
   animation: cosmos 2.2s linear 1.3s 1,cosmos2 6s linear 4.5s 1;
   animation-fill-mode: forwards;
   -o-animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards;
}

@keyframes cosmos {
   0%{opacity: 0;}
   100%{opacity: 1;}
}

@keyframes cosmos2 {
   0%{width: 75%;}
   100%{width: 0%;}
}

.ended{
   position:absolute;
   width:90%;
   z-index:999;
   opacity: 0;
   animation: ended 3s linear 1.3s 1;
   animation-fill-mode: forwards;
   -o-animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards;
}

@keyframes ended {
   0%{opacity: 0;}
   100%{opacity: 1;}
}




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

   .container{
      max-height:350px;
  }

   .click-active{
   max-width:300px;
   max-height:300px;
  }
  
  .click-grow{
      max-width:300px;
      max-height: 300px;
  }
  
  @keyframes grow1 {
      from{
          height:300px;
          width:300px;
      }to{
          height:0px;
          width:0px;
      }
  }
  


}



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

   .click-active{
      max-width:280px;
      max-height:280px;
     }
     
     .click-grow{
         max-width:280px;
         max-height: 280px;
     }
     
     @keyframes grow1 {
         from{
             height:280px;
             width:280px;
         }to{
             height:0px;
             width:0px;
         }
     }
     
   
}