: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: 1;
  color: #e000ff;
  font-size: 400px;
}

.O1 {
  grid-column: 1;
  grid-row: 1;
  animation: rotate-2 5s infinite ;
  animation-delay: 800ms;
  place-self: center; 
}

.T1 {
  grid-column: 2;
  grid-row: 1;
  animation: rotate-2 5s infinite ;
  animation-delay: 1s;
  place-self: center; 

}

.T2 {
  grid-column: 3;
  grid-row: 1;
  animation: rotate-3 5s infinite ;
  animation-delay: 0.3s;
  place-self: center; 

}

.O2 {
  grid-column: 4;
  grid-row: 1;
  animation: rotate-4 5s infinite ;
  animation-delay: 250ms;
  place-self: center; 

}

.S {
  grid-column: 5;
  grid-row: 1;
  animation: rotate-5 5s infinite ;
  animation-delay: 200ms;
  place-self: center; 

}


@keyframes rotate-1 {
  from {  font-variation-settings:"wght" 100; transform: translateY(-1000px) translateX(0px) rotate(0deg);}
  to { font-variation-settings:"wght" 900; transform: translateY(400px) translateX(100px) rotate(90deg);}
}

@keyframes rotate-2 {
  from {  font-variation-settings:"wght" 100; transform: translateY(-1000px) translateX(0px) rotate(0deg);}
  to {  font-variation-settings:"wght" 900;transform: translateY(400px) translateX(40px) rotate(30deg);}
}

@keyframes rotate-3 {
  from { font-variation-settings:"wght" 100;  transform: translateY(-1000px) translateX(0px)  rotate(0deg);}
  to {  font-variation-settings:"wght" 900;transform: translateY(400px) translateX(-100px) rotate(210deg);}
}

@keyframes rotate-4 {
  from {  font-variation-settings:"wght" 100; transform: translateY(-1000px) translateX(0px) rotate(0deg);}
  to { font-variation-settings:"wght" 900; transform: translateY(400px) translateX(-150px) rotate(70deg);}
}

@keyframes rotate-5 {
  from {  font-variation-settings:"wght" 100; transform: translateY(-1000px) translateX(0px) rotate(0deg);}
  to {  font-variation-settings:"wght" 900;transform: translateY(400px)translateX(-150px) rotate(120deg);}
}




