/* Vnější kontejner pro běžící text */
.marquee-wrapper {
  width: 100%; /* přes celou šířku obrazovky */
  overflow: hidden; /* skryje text mimo viditelnou oblast */
  position: fixed; /* zůstává nahoře i při scrollování */
  top: 0;
  left: 0;
  background-color: rgba(102, 102, 102, 0.6); /* šedé pozadí s 60% průhledností */
  z-index: 9999; /* aby byl vždy navrchu ostatního obsahu */
}

/* Samotný text, který se bude pohybovat */
.marquee {
  display: inline-block;
  white-space: nowrap; /* text zůstává v jednom řádku, nezalamuje se */
  color: #05A8DD; /* barva textu */
  font-size: 20px; /* výchozí velikost textu pro desktop */
  padding: 10px 0; /* svislé odsazení textu */
  
  /* Animace posunu textu – definována níže */
  animation: marquee 20s linear infinite;

  /* výchozí pozice – začíná mimo obrazovku napravo */
  position: relative;
  left: 100%;
}

/* RESPONSIVNÍ ÚPRAVY TEXTU */

/* Pro tablety a menší obrazovky – zmenší velikost písma */
@media (max-width: 1024px) {
  .marquee {
    font-size: 18px;
  }
}

/* Pro mobily – ještě menší písmo */
@media (max-width: 768px) {
  .marquee {
    font-size: 15px;
  }
}

/* DEFINICE ANIMACE – text se přesune zprava doleva */
@keyframes marquee {
  0%   { left: 100%; }   /* začátek – mimo obrazovku napravo */
  100% { left: -100%; }  /* konec – mimo obrazovku nalevo */
}