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

body {
  margin: 0;
  overflow: hidden; 
}

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

.grid-container-1 {
  display: grid;
  align-items: center;
  align-content: center;
  font-size: 150px;
  background-color: #980033;
  color: #e000ff;
}

.grid-container-2 {
  display: grid;
  align-items: center;
  align-content: center;
  font-size: 150px;
  background-color: #e000ff;
  color: #980033;
}



.grid-container div {
height: 150px;
padding: 30px;
}

.otto1 {
  animation: my-super-slant-1 10s infinite  ease-in-out;
  animation-delay: 0.2s;
  height: 150px;
  padding: 30px;
} 

.otto2 {
  animation: my-super-slant-2 10s infinite  ease-in-out;
  animation-delay: 0.2s;
  height: 150px;
  padding: 30px;
} 


@keyframes my-super-slant-1 {
  from {  font-variation-settings: "wdth" 25, "slnt" -15; transform: translateX(-2000px);}
  to {  font-variation-settings:  "wdth" 150, "slnt" 15; transform: translateX(2000px);}
}

@keyframes my-super-slant-2 {
  from {  font-variation-settings:  "wdth" 150, "slnt" 15; transform: translateX(2000px);}
  to {  font-variation-settings: "wdth" 25, "slnt" -15; transform: translateX(-2000px);}

}