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

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


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

.flex-container div {
 margin: 20px;
 height: 400px;
}


.otto1 {
  color: #e000ff;
  grid-column: 1;
  grid-row: 1;
  animation: my-super-slant 0.2s infinite alternate ease-in-out;
  animation-delay: 0.5s;
  display: flex;
  background-color: #980033;
} 


.otto2 {
  color: #980033;
  grid-column: 2;
  grid-row: 1;
  animation: my-super-slant-2 0.2s infinite alternate ease-in-out;
  animation-delay: 0.9s;
  background-color: #e000ff;
} 

.otto3 {
  color: #980033;
  grid-column: 1;
  grid-row: 2;
  animation: my-super-slant-2 0.2s infinite alternate ease-in-out;
  animation-delay: 0.2s;
  background-color: #e000ff;
}

.otto4 {
  color: #e000ff;
  grid-column: 2;
  grid-row: 2;
  animation: my-super-slant 0.2s infinite alternate ease-in-out;
  animation-delay: 1s;
  background-color: #980033;
}



@keyframes my-super-slant{
  from {  font-variation-settings: "YTLC" 100;   background-color: #980033;}
  to {  font-variation-settings:  "YTLC" 900;  background-color: #e000ff; }
}

@keyframes my-super-slant-2 {
  from {  font-variation-settings: "YTLC" 100; background-color: #e000ff;  }
  to {  font-variation-settings:  "YTLC" 900;   background-color: #980033;}
}