/* 🌑 Tło i podstawowy układ */
body {
  background: linear-gradient(270deg, red, orange, yellow, green, blue, indigo, violet);
  background-size: 1400% 1400%;
  animation: rainbow-bg 15s ease infinite;
  color: white;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  margin: 0;
  padding-top: 60px;
  min-height: 100vh;
}

/* 🌈 Animacja przesuwającego się gradientu tła */
@keyframes rainbow-bg {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ✨ Tęczowy napis z animowanym gradientem */
h1, span {
  font-size: 60px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  background-size: 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow-text 5s linear infinite;
  display: inline-block;
}

/* 🔥 Animacja przesuwającego się gradientu tekstu */
@keyframes rainbow-text {
  0% { background-position: 0%; }
  100% { background-position: 100%; }
}

/* 🌈 Linie tęczy na dole */
hr {
  height: 30px;
  border: none;
  margin: 0;
  animation: glow 3s ease-in-out infinite alternate;
}

/* 💡 Efekt świecenia */
@keyframes glow {
  from { filter: brightness(1); }
  to { filter: brightness(1.5); }
}

/* 🦶 Stopka */
footer {
  margin-top: 60px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 5px #000;
}