body {
  background-color:#f6f6f6;
}
@-webkit-keyframes rocket-ship--ship-ani {
  0%,
  100% {
    -webkit-transform:scale(1, 1);
    transform:scale(1, 1);
  }
  50% {
    -webkit-transform:scale(.95, 1.05);
    transform:scale(.95, 1.05);
  }
}
@keyframes rocket-ship--ship-ani {
  0%,
  100% {
    transform:scale(1, 1);
  }
  50% {
    transform:scale(.95, 1.05);
  }
}

@-webkit-keyframes rocket-ship--smoke-ani {
  0%,
  100% {
    -webkit-transform:scale(1);
    transform:scale(1);
  }
  50% {
    -webkit-transform:scale(0);
    transform:scale(0);
  }
}
@keyframes rocket-ship--smoke-ani {
  0%,
  100% {
    transform:scale(1);
  }
  50% {
    transform:scale(0);
  }
}

@-webkit-keyframes rocket-ship--flame-ani {
  0%,
  25%,
  60%,
  100% {
    border-width:4em 1em 0 1em;
  }
  10%,
  90% {
    border-width:2em 1em 0 1em;
  }
  40% {
    border-width:3em 1em 0 1em;
  }
}
@keyframes rocket-ship--flame-ani {
  0%,
  25%,
  60%,
  100% {
    border-width:4em 1em 0 1em;
  }
  10%,
  90% {
    border-width:2em 1em 0 1em;
  }
  40% {
    border-width:3em 1em 0 1em;
  }
}

@-webkit-keyframes planet--rotate-ani {
  0% {
    -webkit-transform:rotate( 0deg );
    transform:rotate( 0deg );
  }
  100% {
    -webkit-transform:rotate( -360deg );
    transform:rotate( -360deg );
  }
}
@keyframes planet--rotate-ani {
  0% {
    transform:rotate( 0deg );
  }
  100% {
    transform:rotate( -360deg );
  }
}

.rocket-ship--banner {
  display:block;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  width:100%;
  height:38em;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid #ddd;
}
.rocket-ship--banner::before {
  content:"";
  display:block;
  width:100%;
  height:33em;
  position:absolute;
  left:0;
  bottom:0;
  background-color:white;
  border-width:1px 1px 0 1px;
  border-style:solid;
  border-color:#ddd;
  border-radius:50% 50% 0 0 / 12em 12em 0 0;
}

.rocket-ship--banner * {
  -webkit-box-sizing:inherit;
  box-sizing:inherit;
}

.rocket-ship--ship {
  position:absolute;
  -webkit-transform:translate3d( 18em, -2em, 0 ) rotate(55deg);
  transform:translate3d( 18em, -2em, 0 ) rotate(55deg);
}
.rocket-ship--fuselage {
  display:block;
  width:12em;
  height:13em;
  -webkit-transform-origin:center bottom;
  transform-origin:center bottom;
  -webkit-animation:rocket-ship--ship-ani .8s linear infinite;
  animation:rocket-ship--ship-ani .8s linear infinite;
}

.rocket-ship--contrail {
  position:absolute;
  top:13.5em;
  left:1em;
}
.rocket-ship--tail {
  display:block;
  width:4em;
  height:11.5em;
  background-color:#ece4f1;
  position:absolute;
  left:3em;
  top:0;
  -webkit-border-radius:0 0 2em 2em;
  border-radius:0 0 2em 2em;
}
.rocket-ship--flame {
  display:block;
  width:0;
  height:0;
  position:absolute;
  top:0;
  left:1em;
  border-width:4em 1em 0 1em;
  border-style:solid;
  border-color:#c7aed4 transparent;
  -webkit-animation:rocket-ship--flame-ani 1.5s ease-in-out infinite;
  animation:rocket-ship--flame-ani 1.5s ease-in-out infinite;
}
.rocket-ship--cloud {
  position:absolute;
  top:6em;
  left:0;
}
.rocket-ship--smoke {
  display:block;
  width:4em;
  height:4em;
  position:absolute;
  -webkit-border-radius:50%;
  border-radius:50%;
  background-color:#ece4f1;
  -webkit-animation:rocket-ship--smoke-ani 2s ease infinite;
  animation:rocket-ship--smoke-ani 2s ease infinite;
}
.rocket-ship--smoke.-one { left:.5em; top:1em; -webkit-animation-delay:.2s; animation-delay:.2s; }
.rocket-ship--smoke.-two { left:5em; top:0; -webkit-animation-delay:.3s; animation-delay:.3s; }
.rocket-ship--smoke.-three { left:6em; top:2em; -webkit-animation-delay:.5s; animation-delay:.5s; }
.rocket-ship--smoke.-four { left:.5em; top:3em; -webkit-animation-delay:.9s; animation-delay:.9s; }
.rocket-ship--smoke.-five { left:2em; top:4em; -webkit-animation-delay:.5s; animation-delay:.5s; }
.rocket-ship--smoke.-six { left:4em; top:3em; -webkit-animation-delay:1s; animation-delay:1s; }

.rocket-ship--planet {
  display:block;
  width:60em;
  height:60em;

  position:absolute;
  left:50%;
  bottom:-44em;

  margin-left:-30em;


  background-color:#c7aed4;
  -webkit-border-radius:50%;
  border-radius:50%;

  -webkit-animation:planet--rotate-ani 14s linear infinite;
  animation:planet--rotate-ani 14s linear infinite;
}

.rocket-ship--planet::after {
  content: "";

  display:block;
  width:4em;
  height:4em;

  position:absolute;
  left:50%;
  top:50%;
  margin-left:-2em;
  margin-top:-2em;

  border-radius:50%;

  box-shadow:
    10em 20em 0 0 #a37ab6,
    20em 10em 0 2em #a37ab6,
    21em -1em 0 1em #a37ab6,
    18em -6em 0 0 #a37ab6,
    17em -15em 0 2em #a37ab6,
    8em -22em 0 0 #a37ab6,
    -1em -24em 0 1em #a37ab6,
    -10em -21em 0 0 #a37ab6,
    -18em -12em 0 2em #a37ab6,
    -23em 7em 0 1em #a37ab6,
    -16em 18em 0 0 #a37ab6,
    -24em 0 0 0 #a37ab6,

    -4em 20em 0 2em #a37ab6;
}

.rocket-ship--banner {
  font-size:4px;
}
@media screen and ( min-width:640px ) {
  .rocket-ship--banner {
    font-size:8px;
  }
}
@media screen and ( min-width:960px ) {
  .rocket-ship--banner {
    font-size:10px;
  }
}