.kolorowy-tekst {
  animation: zmianaKoloru 8s linear infinite;
  display: block;
  text-decoration: none;
  font-weight: bold;
}

@keyframes zmianaKoloru {
  0%   { color: hsl(0, 100%, 50%); }   /* Czerwony */
  16%  { color: hsl(60, 100%, 50%); }  /* Żółty */
  33%  { color: hsl(120, 100%, 50%); } /* Zielony */
  50%  { color: hsl(180, 100%, 50%); } /* Cyjan */
  66%  { color: hsl(240, 100%, 50%); } /* Niebieski */
  83%  { color: hsl(300, 100%, 50%); } /* Magenta */
  100% { color: hsl(360, 100%, 50%); } /* Czerwony */
}
  





.gradient-text {
  display: inline-block;
  background: linear-gradient(90deg, rgb(0, 255, 76), rgb(255, 255, 0), rgb(0, 119, 255), rgb(238, 130, 238));
  background-size: 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  font-weight: bold;
}





.teczowy-animowany {
  display: inline-block;
  background: linear-gradient(
    90deg,
    hsl(0, 100%, 50%),
    hsl(10, 100%, 50%),
    hsl(20, 100%, 50%),
    hsl(30, 100%, 50%),
    hsl(40, 100%, 50%),
    hsl(50, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(70, 100%, 50%),
    hsl(80, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(100, 100%, 50%),
    hsl(110, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(130, 100%, 50%),
    hsl(140, 100%, 50%),
    hsl(150, 100%, 50%),
    hsl(160, 100%, 50%),
    hsl(170, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(190, 100%, 50%),
    hsl(200, 100%, 50%),
    hsl(210, 100%, 50%),
    hsl(220, 100%, 50%),
    hsl(230, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(250, 100%, 50%),
    hsl(260, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(280, 100%, 50%),
    hsl(290, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(310, 100%, 50%),
    hsl(320, 100%, 50%),
    hsl(330, 100%, 50%),
    hsl(340, 100%, 50%),
    hsl(350, 100%, 50%),
    hsl(360, 100%, 50%)
  );
  background-size: 300% 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tecza 5s linear infinite;
}

@keyframes tecza {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}


