body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
  overflow: hidden;
  line-height: 0;
  user-select: none;
  transition: line-height 1s;
  &:active {
    line-height: 2;
  }
}
.letter {
  font-size: 24vw;
  font-weight: bold;
  margin: 0 2px;
  display: inline-block;
  animation: rotate 3s ease-in-out infinite;
  transition: line-height 1s, filter 0.5s;
  transform-origin: center top;
  mix-blend-mode: lighten;
  &:hover {
    filter: hue-rotate(270deg);
  }
}
@keyframes rotate {
  100% {
    transform: rotateZ(360deg) rotateX(0deg);
  }
  50%,
  75% {
    transform: rotateZ(0deg) rotateX(360deg);
  }
  /* do mess around with the above */
}