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

body {
  background-color: #000000;
}

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

.wrapper {
  display: grid;
  grid-template-columns: 5;
  gap: auto;
  grid-auto-rows: minmax(auto);
  color: #e000ff;
  font-size: 400px;
}

.O1 {
  grid-column: 1;
  grid-row: 1;
  animation: my-super-slant 0.5s infinite alternate;
  place-self: center; 


}

.T1 {
  grid-column: 5;
  grid-row: 2;
  animation: my-super-slant 0.2s infinite alternate;
  place-self: center; 

}
.T2 {
  grid-column: 3;
  grid-row: 3;
  animation: my-super-slant 0.7s infinite alternate;
  animation-delay: 0.3s;
  place-self: center; 

}
.O2 {
  grid-column: 4;
  grid-row: 4;
  animation: my-super-slant 0.2s infinite alternate;
  animation-delay: 250ms;
  place-self: center; 

}
.S {
  grid-column: 2;
  grid-row: 5;
  animation: my-super-slant 0.2s infinite alternate;
  animation-delay: 2500ms;
  place-self: center; 

}

.S {
  grid-column: 1;
  grid-row: 5;
  animation: my-super-slant 0.4s infinite alternate;
  place-self: center; 

}


@keyframes my-super-slant{
  from {  font-variation-settings:"wght" 100; opacity: 0;}
  to {  font-variation-settings:  "wght" 900; opacity: 1;}
}