@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

.rainbow {
    position: relative;
    z-index: 0;
    overflow: hidden;
  
    &::before {
      content: "";
      position: absolute;
      z-index: -2;
      left: -50%;
      top: -100%;
      width: 200%;
      height: 350%;
  
      background-repeat: no-repeat;
      background-size: 100% 100%, 100% 100%;
      background-position: center;
      background-image: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
      animation: rotate 1.5s linear infinite;
    }
  
    &::after {
      content: "";
      position: absolute;
      z-index: -1;
      left: 4px;
      top: 4px;
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      background: white;
      border-radius: 5px;
    }
  }