.topo {
  width: auto;
  height: 120px;
  overflow: hidden;
  background: transparent;  
  position: absolute; 
  top: 0px; 
  left:0px; 
}

.star-wars {
  /* Flexbox to center the entire element on the screen */
  display: flex;
  justify-content: center;
  /* This is a magic number based on the context in which this snippet is used and effects the perspective */
  height: 120px;
  perspective: 45px;
  /* The rest is totally up to personal styling preferences */
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 250%;
  font-weight: 600;
  letter-spacing: 6px;
  line-height: 125%;
  text-align: justify; 
  color: #FFFFFF;
  text-shadow: 0px 0px 16px #0000FF;
}

.generico {
  position: relative;
  top: 0px;

  animation-name: generico;
  animation-timing-function: linear;
  animation-duration: 120s;
  animation-iteration-count: infinite;  
  
  transform-origin: 0% 135%;	/* cuidado vai jogar com a rotacao  */
}

.generico > .title {
  font-size: 90%;
  text-align: center;
}

.generico > .title h1 {
  margin: 0 0 100px;
  text-transform: uppercase;
}

@keyframes generico {
	/* 
		2 movimentos :	em Y : o texto sobre na vertical
						em Z : o texto afasta-se-resize
		em x : tem uma rotação de 24deg constante
	*/
  0% 
  {
    top: 0;
    transform: rotateX(24deg)  translateZ(0);
  }
  100% 
  { 
    top: -6000px;
    transform: rotateX(24deg) translateZ(-2500px);
  }
}