html, body {
        margin: 0; padding: 0;
        height: 100%;
        font-family: 'Arial', sans-serif;
        color: white;
        overflow-x: hidden;

        background-size: 100% 300%;
        background-attachment: fixed;
        background-position: center 0%;
        transition: background-position 0.1s linear;
    }

  canvas#rainbowCanva {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      pointer-events: none;
      touch-action: none;
    }

    
.rainbow-border {
  position: relative;
  z-index: 0;
  border-radius: 24px;
  background: #111; 
  color: white;
  padding: 1rem;
}

.rainbow-border::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(90deg, 
    red, orange, yellow, green, cyan, blue, violet, red
  );
  background-size: 300% 100%;
  animation: rainbow-scroll 6s linear infinite;
  border-radius: inherit;
  z-index: -1;
  padding: 2px;
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  background-clip: border-box;
  background-origin: border-box;
}

@keyframes rainbow-scroll {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}