body {
  background: #000;
  height: 100vh;
  overflow: hidden;
}

#ui .qm {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -225px 0 0 -225px;
}

#ui .qm:last-child .qm_word {
  color: red;
  font-size: 3.5rem;
  text-shadow: 0 0 10px red;
}

.qm_word {
  color: #fff;
  font-size: 1.4rem;
  transform: translateY(-100%) rotateZ(-30deg);
  font-family: 'Dosis', sans-serif;
  text-shadow: 0 0 10px #ffc800;
  letter-spacing: 2px;
}

.qm_horizontal {
  animation: horizontal 10000ms infinite alternate ease-in-out;
}

.qm_vertical {
  animation: vertical 20000ms infinite linear;
}

@keyframes horizontal {
  from { transform: translateX(0px); }
  to   { transform: translateX(450px); }
}

@keyframes vertical {
  0%   { transform: translateY(180px); }
  10%  { transform: translateY(45px); }
  15%  { transform: translateY(4.5px); }
  18%  { transform: translateY(0px); }
  20%  { transform: translateY(4.5px); }
  22%  { transform: translateY(34.61538px); }
  24%  { transform: translateY(64.28571px); }
  25%  { transform: translateY(112.5px); }
  26%  { transform: translateY(64.28571px); }
  28%  { transform: translateY(34.61538px); }
  30%  { transform: translateY(4.5px); }
  32%  { transform: translateY(0px); }
  35%  { transform: translateY(4.5px); }
  40%  { transform: translateY(45px); }
  50%  { transform: translateY(180px); }
  71%  { transform: translateY(428.57143px); }
  72.5%{ transform: translateY(441.17647px); }
  75%  { transform: translateY(450px); }
  77.5%{ transform: translateY(441.17647px); }
  79%  { transform: translateY(428.57143px); }
  100% { transform: translateY(180px); }
}