@import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");
body {
  display: grid;
  place-items: center;
  min-height: 100svh;
  background-color: black;
  color: white;
}

.line {
  display: flex;
  justify-content: space-between;
}

.word {
  transition: opacity 0.2s ease-in-out;
}

a.word {
  color: inherit;
}
a.word .letter {
  position: relative;
}
a.word .letter::before {
  content: "";
  width: 100%;
  height: 3px;
  display: block;
  position: absolute;
  bottom: 0;
  background-color: red;
}

.letter {
  display: inline-block;
  transition: transform 0.2s ease-in-out;
  transform: translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%)) rotate(calc(var(--r, 0) * 1deg)) scale(var(--s, 1));
}

p {
  font-size: 8vmin;
  font-family: Rubik, sans-serif;
  width: 75vmin;
  text-transform: uppercase;
}
p:hover .word {
  opacity: 0.25;
}
@root {
  @keyframes wobble {
    0%, 100% {
      transform: translateY(0) rotate(0);
    }
    25%, 75% {
      transform: translateY(-5px) rotate(5deg);
    }
    50% {
      transform: translateY(5px) rotate(-5deg);
    }
  }
}
p:hover .word:hover {
  opacity: 1;
}
p:hover .word:hover .letter::before {
  animation: wobble 0.3s infinite;
}
p:hover .word:hover .letter:nth-child(1) {
  --x: -23;
  --y: 17;
  --r: 20;
}
p:hover .word:hover .letter:nth-child(1):hover {
  z-index: 2;
  text-shadow: 2px 2px 10px rgb(0, 0, 0);
  --x: 2;
  --y: 7;
  --r: 10;
  --s: 1.25;
}
p:hover .word:hover .letter:nth-child(2) {
  --x: -10;
  --y: 7;
  --r: 2;
}
p:hover .word:hover .letter:nth-child(2):hover {
  z-index: 2;
  text-shadow: 2px 2px 10px rgb(0, 0, 0);
  --x: -7;
  --y: 2;
  --r: 10;
  --s: 1.25;
}
p:hover .word:hover .letter:nth-child(3) {
  --x: 6;
  --y: -13;
  --r: -24;
}
p:hover .word:hover .letter:nth-child(3):hover {
  z-index: 2;
  text-shadow: 2px 2px 10px rgb(0, 0, 0);
  --x: 9;
  --y: -4;
  --r: -5;
  --s: 1.25;
}
p:hover .word:hover .letter:nth-child(4) {
  --x: 11;
  --y: -23;
  --r: -8;
}
p:hover .word:hover .letter:nth-child(4):hover {
  z-index: 2;
  text-shadow: 2px 2px 10px rgb(0, 0, 0);
  --x: -4;
  --y: -2;
  --r: 3;
  --s: 1.25;
}
p:hover .word:hover .letter:nth-child(5) {
  --x: 9;
  --y: 13;
  --r: -17;
}
p:hover .word:hover .letter:nth-child(5):hover {
  z-index: 2;
  text-shadow: 2px 2px 10px rgb(0, 0, 0);
  --x: 7;
  --y: 8;
  --r: -5;
  --s: 1.25;
}
p:hover .word:hover .letter:nth-child(6) {
  --x: 25;
  --y: -12;
  --r: -9;
}
p:hover .word:hover .letter:nth-child(6):hover {
  z-index: 2;
  text-shadow: 2px 2px 10px rgb(0, 0, 0);
  --x: 9;
  --y: 7;
  --r: 9;
  --s: 1.25;
}
p:hover .word:hover .letter:nth-child(7) {
  --x: -18;
  --y: 2;
  --r: 24;
}
p:hover .word:hover .letter:nth-child(7):hover {
  z-index: 2;
  text-shadow: 2px 2px 10px rgb(0, 0, 0);
  --x: -8;
  --y: -9;
  --r: -1;
  --s: 1.25;
}
p:hover .word:hover .letter:nth-child(8) {
  --x: -8;
  --y: -24;
  --r: 9;
}
p:hover .word:hover .letter:nth-child(8):hover {
  z-index: 2;
  text-shadow: 2px 2px 10px rgb(0, 0, 0);
  --x: -1;
  --y: 1;
  --r: 5;
  --s: 1.25;
}
p:hover .word:hover .letter:nth-child(9) {
  --x: 7;
  --y: 5;
  --r: 17;
}
p:hover .word:hover .letter:nth-child(9):hover {
  z-index: 2;
  text-shadow: 2px 2px 10px rgb(0, 0, 0);
  --x: -8;
  --y: -7;
  --r: 10;
  --s: 1.25;
}
p:hover .word:hover .letter:nth-child(10) {
  --x: -13;
  --y: -9;
  --r: -9;
}
p:hover .word:hover .letter:nth-child(10):hover {
  z-index: 2;
  text-shadow: 2px 2px 10px rgb(0, 0, 0);
  --x: 8;
  --y: -4;
  --r: -5;
  --s: 1.25;
}