:root {
  font-family: 'ruder';
}

.hand {
  position: fixed;
  z-index: 1;
}



.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 990px;
}

.flex-container div {
height: 1200px;
}


.otto1 {
  color: #e000ff;
  animation: my-super-slant 2s infinite  ease-in-out;
  animation-delay: 0.2s;
} 


.otto2 {
  color: #e000ff;
  animation: my-super-slant 2s infinite  ease-in-out;
  animation-delay: 0.3s;
} 

.otto3 {
  color: #e000ff;
  animation: my-super-slant 2s infinite  ease-in-out;
  animation-delay: 0.1s;
}

.otto4 {
  color: #e000ff;
  animation: my-super-slant 2s infinite  ease-in-out;
  animation-delay: 0.2s;
}

.otto5 {
  color: #e000ff;
  animation: my-super-slant 2s infinite  ease-in-out;
  animation-delay: 0.3s;
}


@keyframes my-super-slant{
  0% {  font-variation-settings: "YTLC" 0, "YTUC" 100; transform: translateY(700px) }
  30% {  font-variation-settings:  "YTLC" 0, "YTUC" 900; transform: translateY(-700px)}
  60% {  font-variation-settings:  "YTLC" 0, "YTUC" 900; transform: translateY(-180px)}
  100% {  font-variation-settings:  "YTLC" 0, "YTUC" 0; transform: translateY(-900px)}
}