/* config */
/* general */
body {
  background-color: #52617d;
  overflow: hidden;
}
img,
div {
  position: absolute;
}
.camera {
  left: -20%;
  top: -20%;
  width: 140%;
  height: 140%;
  transform: rotateZ(-25deg);
}
.spaceship {
  left: 50%;
  top: 50%;
  width: 552.8409090909091px;
  height: 246.5909090909091px;
  margin-left: -276.42045454545456px;
  margin-top: -123.29545454545455px;
  z-index: 10;
}
.spaceship .rotate-box {
  position: relative;
  width: 100%;
  height: 100%;
}
.spaceship .exhaust {
  top: 50%;
  right: 285.25px;
  width: 202.8409090909091px;
  height: 105.39772727272728px;
  margin-top: -52.69886363636364px;
}
.spaceship .hull {
  right: 0;
  width: 350px;
  height: 246.5909090909091px;
}
.stars {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.moon {
  width: 100px;
  right: 50px;
  top: 50px;
}
.dashboard {
  width: 500px;
  right: 0;
  bottom: 0;
}
.price,
.cap {
  font: normal 14px courier new;
  right: 15px;
  bottom: 127px;
  width: 109px;
  height: 20px;
}
.cap {
  bottom: 50px;
}
/* Cruising state */
.cruising .spaceship {
  animation: cruising-movement 1.5s linear 0s infinite;
}
.cruising .spaceship .rotate-box {
  animation: cruising-rotation 1s linear 0s infinite alternate;
}
.cruising .exhaust {
  animation: cruising-exhaust 500ms linear 0s infinite alternate;
}
@keyframes cruising-movement {
  from {
    transform: rotateZ(0) translateX(5px) rotateZ(0);
  }
  to {
    transform: rotateZ(360deg) translateX(5px) rotateZ(-360deg);
  }
}
@keyframes cruising-rotation {
  from {
    transform: rotateZ(-3deg);
  }
  to {
    transform: rotateZ(3deg);
  }
}
@keyframes cruising-exhaust {
  from {
    width: 202.8409090909091px;
  }
  to {
    width: 212.98295454545456px;
  }
}
/* Excited state */
.excited .spaceship {
  animation: excited-movement 500ms linear 0s infinite;
}
.excited .spaceship .rotate-box {
  animation: excited-rotation 100ms linear 0s infinite alternate;
}
.excited .spaceship .exhaust {
  animation: excited-exhaust 150ms linear 0s infinite alternate;
}
@keyframes excited-movement {
  from {
    transform: rotateZ(0) translateX(10px) rotateZ(0);
  }
  to {
    transform: rotateZ(360deg) translateX(10px) rotateZ(-360deg);
  }
}
@keyframes excited-rotation {
  from {
    transform: rotateZ(-8deg);
  }
  to {
    transform: rotateZ(8deg);
  }
}
@keyframes excited-exhaust {
  from {
    width: 243.4090909090909px;
  }
  to {
    width: 365.1136363636364px;
  }
}