:root {
  --color-0: #ffc6ff;
  --color-1: #ffadad;
  --color-2: #ffd6a5;
  --color-3: #fdffb6;
  --color-4: #caffbf;
  --color-5: #9bf6ff;
  --color-6: #a0c4ff;
  --color-7: #bdb2ff;
}

@keyframes rainbow {
  0% {
    text-shadow: 0 0 1px var(--color-0);
  }
  12.5% {
    text-shadow: 0 0 1px var(--color-1);
  }
  25% {
    text-shadow: 0 0 1px var(--color-2);
  }
  37.5% {
    text-shadow: 0 0 1px var(--color-3);
  }
  50% {
    text-shadow: 0 0 1px var(--color-4);
  }
  62.5% {
    text-shadow: 0 0 1px var(--color-5);
  }
  75% {
    text-shadow: 0 0 1px var(--color-6);
  }
  87.5% {
    text-shadow: 0 0 1px var(--color-7);
  }
  100% {
    text-shadow: 0 0 1px var(--color-8);
  }
}

@keyframes circus {
  0% {
    transform: rotate(2160deg) scaleX(4);
  }
  100% {
    transform: rotate(0) scaleX(1);
  }
}

#bcn:hover {
  animation: 0.5s ease-out circus;
  cursor: pointer;
  position: relative;
}

#bcn:hover:after {
  bottom: -20px;
  content: '';
  display: block;
  left: -20px;
  position: absolute;
  right: -20px;
  top: -20px;
}

#bcn:hover span {
  color: transparent;
  transition: linear 125ms color;
}

#bcn:hover span:nth-child(7n + 1) {
  animation: 1s linear infinite rainbow;
}

#bcn:hover span:nth-child(7n + 2) {
  animation: 1s linear 125ms infinite rainbow;
}

#bcn:hover span:nth-child(7n + 3) {
  animation: 1s linear 250ms infinite rainbow;
}

#bcn:hover span:nth-child(7n + 4) {
  animation: 1s linear 375ms infinite rainbow;
}

#bcn:hover span:nth-child(7n + 5) {
  animation: 1s linear 500ms infinite rainbow;
}

#bcn:hover span:nth-child(7n + 6) {
  animation: 1s linear 625ms infinite rainbow;
}

#bcn:hover span:nth-child(7n + 7) {
  animation: 1s linear 750ms infinite rainbow;
}

#bcn:hover span:nth-child(7n + 8) {
  animation: 1s linear 1000ms infinite rainbow;
}

.carnival {
  --palette-content-bg: #3a86ff;
  --palette-content-fg: #fff;
  --palette-contrast-bg: #ffbe0b ;
  --palette-main-bg: #ff006e;
  --palette-main-fg: #fff;
}