@import url('http://fonts.googleapis.com/css?family=Montserrat:700');
body{
  font-family: 'Montserrat', san-serif;
  width:100%;
  height:100vh;
  background-image: linear-gradient(#374C61,#475A6E);
  margin:0;
  overflow:hidden;
  display:flex;
  justify-content:center;
}
.group1{
  z-index:5;
  animation: float-cloud 1s ease infinite;
}
.group1 span{
  position:absolute;
  background-color:#EDE6C4;
  width:80px;
  height:80px;
  border-radius:50%;
}
.clouds{
  display:inherit;
  flex-direction:row;
  align-items:flex-end;
  .left,.right{
    width:35vw;
    height:50vh;
  }
  .right{
    transform: rotatey(180deg);
  }
  .left,.right{
    span:first-of-type{
      bottom:-20px;
    }
    span:nth-of-type(2){
      bottom:20px;
      margin-left:90px;
      transform:scale(2.5);
    }
    span:nth-of-type(3){
      margin-left:200px;
      bottom:5px;
      transform: scale(1.5);
    }
    span:last-of-type{
      margin-left:280px;
      bottom:-35px;
    }
  }
}
.group2{
  position:absolute;
  left:15%;
  bottom:0;
  transform:scale(1.2);
  animation: cloud2 1.5s ease
  infinite;
  z-index:3;
  span{
    position:absolute;
    background-color:#DAD6B5;
    width:100px;
    height:100px;
    border-radius:50%;
  }
}
@keyframes float-cloud{
  0%{
    transform:translatey(-5px);
  }
  50%{
    transform:translatey(0px);
  }
  100%{
    transform:translatey(-5px);
  }
}
@keyframes cloud2{
 0%{
    transform:translatey(-5px) scale(1.2);
  }
  50%{
    transform:translatey(0px) scale(1.2);
  }
  100%{
    transform:translatey(-5px) scale(1.2);
  }
}
.rocket{
  position:absolute;
  left:50%;
  margin-left:-50px;
  transform:translatey(80vh);
  transition: transform 5s ease;
  z-index:3;
  span:first-of-type{ //rocket body
    position:absolute;
    width:100px;
    height:200px;
    background-image: linear-gradient(to right,#27C6A7 50%,#21A68D 50%);
    border-radius: 50%;
  }
  span:nth-of-type(2){//window
    position:absolute;
    width:50px;
    height:50px;
    border:3px solid #3B577A;
    border-radius:50%;
    background-image: linear-gradient(to right,#389CDF 50%,#318AC2 50%);
    margin-left:22px;
    margin-top:40px;
  }
  span:nth-of-type(3){
    position:absolute;
    width:40px;
    height:75px;
    background-image: linear-gradient(to right,#ED5C4D 50%,#C74A3D 50%);
    border-radius: 50% 50% 10% 10%;
    transform:translatey(145px) translatex(30px);
  }
  &.launch{
    transform: translatey(0vh);
  }
}
.stars{
  position:absolute;
  z-index:1;

  span:first-of-type{
    position:absolute;
    width:5px;
    height:5px;
    border-radius:50%;
    background-color: #eee;
    box-shadow: 0 0 14px 1px #fff;
    animation: star 1s ease infinite;
  }
  span:nth-of-type(2){
    position:absolute;
    width:2px;
    height:2px;
    border-radius:50%;
    background-color: #eee;
    box-shadow: 0 0 14px 1px #fff;
    animation: star 1s 0.6s ease infinite;
    transform: translatey(100px) translatex(-200px);
  }
  span:nth-of-type(3){
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background-color: #eee;
    box-shadow: 0 0 14px 1px #fff;
    animation: star 1s 0.6s ease infinite;
    transform: translatey(60px) translatex(-500px);
  }
  span:nth-of-type(4){
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background-color: #eee;
    box-shadow: 0 0 14px 1px #fff;
    animation: star 1s 0.6s ease infinite;
    transform: translatey(200px) translatex(-600px);
  }
}
@keyframes star{
  0%{
    opacity:1;
  }
  50%{
    opacity:0.6;
  }
  100%{
    opacity:1;
  }
}

.text{
  position:absolute;
  width:400px;
  left:50%;
  margin-left:-130px;
  color: #eee;
  text-shadow: 0 0 3px  #fff;
  margin-top:250px;
  opacity:0;
  transition:opacity 1s 2s ease;
  &.show{
    opacity:1;
  }
}