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 */
  }