.body--light {
  --rocket-background-url: url("images/beside_up.png") no-repeat 50% 0;
}
.body--dark {
  --rocket-background-url: url("images/beside_up_white.png") no-repeat 50% 0;
}
#rocket {
  position: fixed;
  right: 50px;
  bottom: 50px;
  display: block;
  visibility: hidden;
  width: 44px;
  height: 45px;
  background: var(--rocket-background-url);
  opacity: 0;
  -webkit-transition: visibility 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -webkit-transform 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  -moz-transition: visibility 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -moz-transform 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  transition: visibility 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), transform 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  z-index: 20;
}
@media mq-mobile {
  #rocket {
    right: 12px;
    bottom: 20px;
  }
}
#rocket i {
  display: block;
  margin-top: 48px;
  height: 14px;
  background: url("images/beside_up.png") no-repeat 50% -20px;
  opacity: 0.5;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
}
#rocket:hover {
  background-position: 50% -44px !important;
}
#rocket:hover i {
  background-position: 50% 100%;
  -webkit-animation: flaming 0.7s infinite;
  -moz-animation: flaming 0.7s infinite;
  animation: flaming 0.7s infinite;
}
#rocket.show {
  visibility: visible;
  opacity: 1;
}
#rocket.launch {
  background-position: 50% -44px;
  opacity: 0;
  -webkit-transform: translateY(-500px);
  -moz-transform: translateY(-500px);
  -ms-transform: translateY(-500px);
  transform: translateY(-500px);
  pointer-events: none;
}
#rocket.launch i {
  background-position: 50% 100%;
  -webkit-transform: scale(1.4, 3.2);
  -moz-transform: scale(1.4, 3.2);
  transform: scale(1.4, 3.2);
}