* {
  margin: 0;
  padding: 0;
  cursor: none;
}

.circle {
  width: 350px;
  height: 350px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  top: 30%;
  left: 30%;
  margin: -20px 0 0 -20px;
  pointer-events: none;
  opacity: 15%;
  animation: 4s ease 0s normal forwards 1 fadein;
  mix-blend-mode: hue;
}

canvas {
  display: block;
  filter: brightness(160%) hue-rotate(140deg) saturate(270%);
  transition: 1050ms all ease-in-out;
  backface-visibility: hidden;
  animation: interference var(--animation-time) infinite;
}

#overlay {
    cursor: none;
    opacity: 0.6;
    font-family: 'Shadows Into Light';
    font-size: 4.2vh;
    font-weight: 400;
    letter-spacing: 1.2px;
    background-image: linear-gradient(to right, orange , yellow, yellow, green, cyan, cyan, blue, violet);
    background-size: 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: 50px;
    margin-left: 30px;
    filter: blur(1.3px);
    animation: rgb 2.5s linear infinite, 3s ease 0s normal forwards 1 fadein;
    transition: opacity .65s ease-in-out;
}

#container {
  position: absolute;
}

@keyframes interference {
    0% { transform: skewX(0deg); filter: hue-rotate(140deg) saturate(270%) brightness(160%); }
    1% { transform: skewX(5deg); }
    2% { transform: skewX(0deg); }
    31% { transform: skewX(-2deg); filter: hue-rotate(155deg) saturate(800%) brightness(160%); }
    42% { transform: skewX(1deg); filter: hue-rotate(170deg) saturate(800%) brightness(160%); }
    54% { transform: skewX(0deg); filter: hue-rotate(180deg) saturate(370%) brightness(160%); }
    84% { transform: skewX(0deg); filter: hue-rotate(165deg) saturate(370%) brightness(160%); }
    94% { transform: skewX(1deg); filter: hue-rotate(150deg) saturate(370%) brightness(160%); }
    95% { transform: skewX(-3deg); }
    96% { transform: skewX(1deg); }
    100% { transform: skewX(0deg); }
}

@keyframes rgb {
  0% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(180deg); }  
  100% { filter: hue-rotate(360deg); }
}

@keyframes fadein{
  0% { opacity:0; }
  66% { opacity:0; }
  100% { opacity:.65; }
}