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

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

.container {
  display: grid;
  height: 100vh; 
  width: 100vw; 
  align-items: center;
  justify-content: center;
  text-align: center;
}

.otto1 {
  grid-column: 1;
  grid-row: 1;
  font-variation-settings: "wdth" 25;
  font-size: 150px;
  color:#e000ff;
  animation: my-super-slant 1s infinite  ease-in-out;
  text-shadow: 5px 5px 0px #00ff15;
}

.otto2 {
  grid-column: 1;
  grid-row: 2;
  font-variation-settings: "wdth" 50;
  font-size: 150px;
  color:#e000ff;
  animation: my-super-slant 1s infinite  ease-in-out;
  animation-delay: 0.1s;
  text-shadow: 5px 5px 0px #00ff15;
}

.otto3 {
  grid-column: 1;
  grid-row: 3;
  font-variation-settings: "wdth" 75;
  font-size: 150px;
  color:#e000ff;
  animation: my-super-slant 1s infinite  ease-in-out;
  animation-delay: 0.2s;
  text-shadow: 5px 5px 0px #00ff15;

}

.otto4 {
  grid-column: 1;
  grid-row: 4;  
  font-variation-settings: "wdth" 100;
  font-size: 150px;
  color:#e000ff;
  animation: my-super-slant 1s infinite  ease-in-out;
  animation-delay: 0.3s;
  text-shadow: 5px 5px 0px #00ff15;

}

.otto5 {
  grid-column: 1;
  grid-row: 5;
  font-variation-settings: "wdth" 125;
  font-size: 150px;
  color:#e000ff;
  animation: my-super-slant 1s infinite  ease-in-out;
  animation-delay: 0.4s;
  text-shadow: 5px 5px 0px #00ff15;
}



@keyframes my-super-slant{
  0% {transform: rotateY(0deg); text-shadow: 5px 5px 0px #00ff15;}
  100% {  transform: rotateY(180deg); text-shadow: -5px 5px 0px #00ff15;}
}