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

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

.otto1 {
  animation: my-super-slant 4s infinite alternate ease-in-out;
  mix-blend-mode: difference;
} 

.otto2 {
  animation: my-super-slant 5s infinite alternate ease-in-out;
  mix-blend-mode: difference;

} 

.otto3 {
  animation: my-super-slant 6s infinite alternate ease-in-out;
  mix-blend-mode: difference;
} 

.otto4 {
  animation: my-super-slant 3s infinite alternate ease-in-out;
  mix-blend-mode: difference;
}

.otto5 {
  animation: my-super-slant 4s infinite alternate ease-in-out;
  mix-blend-mode: difference;
}



.container {
  color: #e000ff;
  display: flex;
  align-items: start;
  justify-content: center;
  height: 100vh;
  text-decoration: none;
  font-size: 200px;
  font-family: 'ruder';
}



@keyframes my-super-slant {
  0% { font-variation-settings: "YTUC" 100; transform: translateY(0)}
  50% { font-variation-settings: "YTUC" 900; transform: translateY(70vh)}
  100% { font-variation-settings: "YTUC" 100; transform: translateY(50)}
}