html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: auto; /* Zakáže posouvání */
}

body {
  background-image: url('../img/Cherubíni.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  backdrop-filter: brightness(0.7);

}

/* Nadpisy */
h1, h2 {
  color: #343a40;
  font-weight: 500;
  text-align: center;
  margin: 1.5rem 0 1rem;
}

/* Odkazy */
a {
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Odstavce a seznamy */
p {
  margin: 1rem 0;
}
p, li {
  line-height: 1.6;
}
ul {
  list-style-type: square;
  padding-left: 1.5rem;
}

/* Speciální třída pro diskuse */
p.zobrazit-diskuse {
  text-align: right;
  font-size: 0.85rem;
  margin: 0 2rem 1rem 0;
}

/* Tabulky */
table {
  background-color: rgba(255, 255, 255, 0.95);
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}
th, td {
  border: 1px solid #dee2e6;
  padding: 0.5rem;
}
th {
  background-color: #ffdc9c;
  font-size: 0.9rem;
  font-weight: bold;
  text-align: left;
}

/* Nadpisová sekce tabulek */
.header {
  background-color: #ffdc9c;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  border: 1px solid #ced4da;
}

/* Formuláře v tabulkách */
table textarea {
  width: 100%;
}
table.diskuse-formular {
  width: 100%;
}
table.diskuse-formular input.sender,
table.diskuse-formular input.reset {
  width: 45%;
}
table.diskuse-formular td {
  border: none;
}
table.diskuse-odkazy {
  width: 100%;
}

/* Obrázek vycentrován */
.centeredImage {
  text-align: center;
  margin: 0;
  padding: 0;
}

.stredni-box {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  text-align: center;
  width: 80%;
  max-width: 800px;
  line-height: 1.6;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

  margin: 100px auto;  /* odsazení shora + centrování */
  padding: 30px;
}

.stredni-box img {
  max-width: 100%;   /* obrázek nikdy nebude širší než box */
  height: auto;      /* zachová proporce */
  display: block;    /* odstraní mezery pod obrázkem */
  margin: 10px auto; /* zarovná doprostřed a dá malý rozestup */
}

.stredni-box h2 {
  font-size: clamp(1.2rem, 2vw, 2rem);
  text-align: center;
}

.stredni-box p {
  font-size: clamp(0.9rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: #343a40;
}

.index-container {
  position: relative;
  width: fit-content;  /* Klíčové: kontejner bude přesně tak široký jako obrázek uvnitř */
  height: fit-content; /* Klíčové: kontejner bude přesně tak vysoký jako obrázek uvnitř */
  margin: 0 auto;
  max-height: 95vh; /* zabrání, aby kontejner byl vyšší než okno */
  overflow: hidden;  /* pojistí, že nic "nevyleze" ven */
}

.pozadi-index {
  display: block;
  /* nechte proškálování podle poměru stran, ale nikdy výška > 95vh */
  width: auto;         
  height: auto;
  max-height: 95vh !important;    
  max-width: 63vw;     
  object-fit: contain; /* udrží celek v rámečku bez oříznutí */
  z-index: 1;
}

.tlacitko {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.tlacitko img {
  width: clamp(100%, 20%, 300px);
  height: auto;
  display: block;
}

/* Umístění jednotlivých tlačítek v procentech (vůči pozadí) */
.fara { top: 10%; left: 80%; }
.chram { top: 28%; left: 80%; }


.popredi-obrazek {
  position: absolute;
  width: 64%;
  max-width: 100%;
  height:auto;
  display:block;
  margin: 0 auto;
}







.oznameni-text {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  text-align: center;
  width: 80%;
  max-width: 800px;
  line-height: 1.6;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

  margin: 100px auto;  /* odsazení shora + centrování */
  padding: 30px;
}










/*Liturgie*/

.liturgie-container {
  position: relative;
  width: 60%;          /* můžete přizpůsobit */
  max-width: 100%;
  min-width: 400px;
  margin: 0 auto;
}

.popredi-lit {
  width: 100%;          /* přizpůsobí se kontejneru */
  height: auto;
  display: block;
  z-index: 1;
}

.liturgie {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.liturgie-link {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: clamp(16px, 2vw, 28px);
  color: rgb(180, 0, 0);
  font-family: 'Times New Roman', Times, serif;
  text-align: center;
  text-decoration: none;
  white-space: nowrap; /* Zabrání zalomení textu */
  width: auto;         /* Šířka podle obsahu */
}




/*tajiny*/

.tajiny-container {
  position: relative;
  width: 60%;          /* můžete přizpůsobit */
  max-width: 100%;
  min-width: 400px;
  margin: 0 auto;
}

.popredi-taj {
  width: 100%;          /* přizpůsobí se kontejneru */
  height: auto;
  display: block;
  z-index: 1;
}

.tajiny {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.tajiny-link {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: clamp(16px, 2vw, 28px);
  color: rgb(180, 0, 0);
  font-family: 'Times New Roman', Times, serif;
  text-align: center;
  text-decoration: none;
   white-space: nowrap; /* Zabrání zalomení textu */
  width: auto;         /* Šířka podle obsahu */
}

.popredi-fara {
  width: 60%;
  height: auto;
  display: block;
  margin: 0 auto;
  z-index: 1;
}




/*Drogz*/
.drogy-container {
  position: relative;
  width: 65%;            /* Šířka kontejneru (uprav na 60%, pokud to chceš užší jako původně) */
  min-width: 350px;      /* Minimální šířka pro mobily */
  margin: 0 auto;        /* Zarovnání na střed stránky */
  padding: 0;
}

/* Obrázek na pozadí */
.popredi-drogy {
  width: 100%;
  height: auto;
  display: block;
  z-index: 1;
}

/* Společný styl pro levý i pravý sloupec */
.texty_drogy, .texty_drogy2 {
  position: absolute;
  z-index: 10;
  transform: translate(-50%, -50%);
  text-align: center;
  
  line-height: 1.6;
  font-size: max(1.4vw, 10px); /* Stejná velikost písma jako minule */
  
  color: rgb(180, 0, 0); /* Předpokládám stejnou barvu, případně změň */
  width: 42%;            /* Šířka sloupců */
}

/* Levý sloupec (Texty) - střed levé půlky */
.texty_drogy {
  left: 26%;
  top: 40%;
}

/* Pravý sloupec (CD a odkazy) - střed pravé půlky */
.texty_drogy2 {
  left: 74%;
  top: 50%;
}

/* Styly pro obrázky CD v pravém sloupci */
.texty_drogy2 img {
  width: 20%;            /* Zmenšená šířka pro náhledy CD, stále responzivní */
  height: auto;
  margin-bottom: 5px;    /* Malá mezera pod obrázkem */
  transition: transform 0.2s;
}

/* Styly odkazů */
.texty_drogy a, .texty_drogy2 a, .texty_drogy2 p {
  color: rgb(180, 0, 0); /* Uprav barvu textu dle potřeby */
  text-decoration: none;
  font-family: 'Times New Roman', Times, serif;
  display: inline-block;
  transition: transform 0.2s;
}

/* Efekt při najetí myší */
.texty_drogy a:hover, .texty_drogy2 a:hover, .texty_drogy2 img:hover {
  color: rgb(255, 0, 0);
  transform: scale(1.1);
}

/* --- ÚPRAVA PRO MOBILY (menší mezery) --- */
@media (max-width: 768px) {
  .texty_drogy, .texty_drogy2 {
    line-height: 1.2;
  }
  
  .texty_drogy a, .texty_drogy2 a {
    margin-bottom: 2px;
  }
  
  /* Menší rozestup v druhém sloupci na mobilech */
  .texty_drogy2 {
    line-height: 2.0;
  }
  
  .texty_drogy2 img {
    margin-bottom: 2px;
  }
  
  .texty_drogy2 a, .texty_drogy2 p {
    margin-bottom: 1px;
    line-height: 1;
  }
}




/*Mapa*/
.popredi-mapa {
  width: 60%;
  height: auto;
  display: block;
  margin: 0 auto;
  min-width: 350px;
  z-index: 1;
}






.CD-container {
  position: relative;
  width: 70%;
  max-width: 1200px;
  min-width: 400px;
  margin: 50px auto; /* přidán margin pro odsazení shora */
  height: auto;      /* výška se přizpůsobí obsahu */
}

.popredi-CD {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.tajemstvi-wrapper {
  position: absolute;
  top: 50%;         /* změněno z 65% na 50% */
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  width: 80%;
  gap: 3%;
  padding: 20px;    /* přidán padding pro lepší rozestup */
}

/* Každý sloupec */
.tajemstvi-pergamenu1,
.tajemstvi-pergamenu2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8vw;               /* mezery mezi audiem se zmenšují */
  font-size: clamp(12px, 1.2vw, 18px);
  color: black;
  font-family: 'Times New Roman', Times, serif;
}

/* Texty */
.tajemstvi-pergamenu1 p,
.tajemstvi-pergamenu2 p {
  margin: 0.2em 0;
}

/* Audio přehrávače */
.tajemstvi-pergamenu1 audio,
.tajemstvi-pergamenu2 audio {
  width: 90%;
  height: auto;
  transform: scale(1);
  aspect-ratio: 6 / 1;        /* poměr stran — výška se mění s šířkou */
}

/* Plynulé zmenšování */
@media (max-width: 900px) {
  .tajemstvi-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .tajemstvi-pergamenu1,
  .tajemstvi-pergamenu2 {
    width: 100%;
  }
}





.fara-container {
  position: relative;
  width: 63%;
  max-width: 100%;
  min-width: 350px;
  margin: 0 auto;
}


.popredi-fara1 {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  object-fit: contain;  /* udrží celý obrázek */
  z-index: 1;
}


.fara-text1 {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: rgb(255, 0, 0);

  /*  Plynulé zmenšování podle velikosti okna */
  font-size: 1vw;

  z-index: 2;
  width: 80%;
  line-height: 1.3;
}

.fara-text2 {
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;        /* <== vystředění textu */
  color: rgb(25, 0, 255);

  font-size: 1vw;

  z-index: 2;
  width: 60%;   
  line-height: 1.3;
}

.fara-text3 {
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;        /* <== vystředění textu */
  color: rgb(0, 0, 0);

font-size: 1vw;

  z-index: 2;
  width: 60%;   
  line-height: 1.3;
}


.knihovna-container {
  position: relative;
  width: 60%;
  max-width: 1000px;
  min-width: 350px;
  margin: 0 auto;
}

.popredi-knihovna {
  width: 100%;
  height: auto;
  display: block;
}

.tlacitko-obr {
  position: absolute;
  top: 25%;   /* procenta = pozice vůči obrázku */
  left: 70%;
  transform: translate(-50%, -50%);
  z-index: 2;
  white-space: nowrap;
}

.ocirkvi{
  position: absolute;
  top: 54%;
  left: 60%;
  transform: translate(-50%, -50%);
  font-size: max(1.8vw, 10px);
  color: rgb(255, 0, 51);
  font-family: 'Times New Roman', Times, serif;
  text-align: center;
  z-index: 2;
  white-space: nowrap;

}


.knihovna1{
  position: absolute;
  top: 12%;
  left: 31%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: max(1.6vw, 10px);
  color: rgb(255, 251, 0);
  font-family: 'Times New Roman', Times, serif;
  z-index: 2;
  white-space: nowrap;
}
.knihovna2{
  position: absolute;
  top: 21%;
  left: 30%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: max(1.6vw, 10px);
  color: rgb(255, 251, 0);
  font-family: 'Times New Roman', Times, serif;
  z-index: 2;
  white-space: nowrap;
}
.knihovna3{
  position: absolute;
  top: 26%;
  left: 32%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: max(1.6vw, 10px);
  color: rgb(255, 251, 0);
  font-family: 'Times New Roman', Times, serif;
  z-index: 2;
  white-space: nowrap;
}
.knihovna4{
  position: absolute;
  top: 29%;
  left: 30%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: max(1.6vw, 10px);
  color: rgb(255, 251, 0);
  font-family: 'Times New Roman', Times, serif;
  z-index: 2;
  white-space: nowrap;
}
.knihovna5{
  position: absolute;
  top: 35%;
  left: 30%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: max(1.6vw, 10px);
  color: rgb(255, 251, 0);
  font-family: 'Times New Roman', Times, serif;
  z-index: 2;
  white-space: nowrap;
}
.knihovna6{
  position: absolute;
  top: 40%;
  left: 32%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: max(1.6vw, 10px);
  color: rgb(255, 251, 0);
  font-family: 'Times New Roman', Times, serif;
  z-index: 2;
  white-space: nowrap;
}
.knihovna7{
  position: absolute;
  top: 43%;
  left: 31%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: max(1.6vw, 10px);
  color: rgb(255, 251, 0);
  font-family: 'Times New Roman', Times, serif;
  z-index: 2;
  white-space: nowrap;
}
.knihovna8{
  position: absolute;
  top: 49%;
  left: 33%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: max(1.6vw, 10px);
  color: rgb(255, 251, 0);
  font-family: 'Times New Roman', Times, serif;
  z-index: 2;
  white-space: nowrap;
}
.knihovna9{
  position: absolute;
  top: 53%;
  left: 31%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: max(1.6vw, 10px);
  color: rgb(255, 251, 0);
  font-family: 'Times New Roman', Times, serif;
  z-index: 2;
  white-space: nowrap;
}
.knihovna10{
  position: absolute;
  top: 56%;
  left: 29%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: max(1.6vw, 10px);
  color: rgb(255, 251, 0);
  font-family: 'Times New Roman', Times, serif;
  z-index: 2;
  white-space: nowrap;
}
.knihovna11{
  position: absolute;
  top: 61%;
  left: 32%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: max(1.6vw, 10px);
  color: rgb(255, 251, 0);
  font-family: 'Times New Roman', Times, serif;
  z-index: 2;
  white-space: nowrap;
}
.knihovna12{
  position: absolute;
  top: 70%;
  left: 32%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: max(1.6vw, 10px);
  color: rgb(255, 251, 0);
  font-family: 'Times New Roman', Times, serif;
  z-index: 2;
  white-space: nowrap;
}
.knihovna13{
  position: absolute;
  top: 75%;
  left: 31%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: max(1.6vw, 10px);
  color: rgb(255, 251, 0);
  font-family: 'Times New Roman', Times, serif;
  z-index: 2;
  white-space: nowrap;
}

.knihovna14{
  position: absolute;
  top: 15%;
  left: 29%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: max(1.6vw, 10px);
  color: rgb(255, 251, 0);
  font-family: 'Times New Roman', Times, serif;
  z-index: 2;
  white-space: nowrap;
}








/*modlitbz cteni*/

.modlitby-container {
  position: relative;
  width: 95%;          
  max-width: 1100px;
  margin: 50px auto; /* Vycentruje a přidá místo nahoře/dole */
}

/* Obrázek udává velikost celého bloku */
.modlitby-bg {
  display: block;
  width: 100%;
  height: auto;
}

/* Společný styl pro oba sloupce textu - MUSÍ zůstat absolute pořád! */
.modlitby_cteni, .modlitby_cteni2 {
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1.6;
  
  /* Plynulé zmenšování písma s velikostí okna (od 9px do 16px) */
  font-size: clamp(9px, 1.5vw, 22px);
  color: rgb(180, 0, 0);
  width: 38%; /* Aby to nepřelezlo přes okraje pergamenu */
}

/* Pozice pro levý a pravý sloupec */
.modlitby_cteni {
  left: 26%; /* Možná budeš muset jemně doladit procenta podle obrázku */
}

.modlitby_cteni2 {
  left: 74%; /* Totéž zde */
}

/* Styly odkazů */
.modlitby_cteni a, .modlitby_cteni2 a {
  color: rgb(180, 0, 0);
  text-decoration: none;
  font-family: 'Times New Roman', Times, serif;
  display: inline-block; 
  transition: transform 0.2s;
  font-weight: bold;
}

.modlitby_cteni a:hover, .modlitby_cteni2 a:hover {
  color: rgb(255, 0, 0);
  transform: scale(1.1);
}

/* --- ÚPRAVA PRO MOBILY --- */
@media (max-width: 768px) {
  .modlitby_cteni, .modlitby_cteni2 {
    /* Místo utrhnutí z obrázku jen zmenšíme mezery a font */
    line-height: 1.3;
    width: 42%; /* Na mobilu můžou být texty trochu víc roztažené do šířky */
  }
}







.texty_muzika {
  position: absolute;
  z-index: 10;
  color: rgb(180, 0, 0);
  font-size: clamp(8px, 1vw, 20px); /* minimálně 12px, plynule podle šířky, maximálně 20px */
  padding: clamp(5px, 1vw, 15px);    /* plynulé paddingy s minimem a maximem */
  border-radius: clamp(2px, 0.5vw, 8px);
  top: 40%;
  left: 35%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 2;
}
.texty_muzika a {
  color: rgb(180, 0, 0);
  font-family: 'Times New Roman', Times, serif;
  display: inline;       /* odkaz je jen kolem textu */
  width: auto;           /* šířka podle obsahu */
  height: auto;          /* výška podle obsahu */
  padding: 0;            /* žádné zbytečné okraje */
  margin: 0; 
}

.texty_muzika a:hover {
  color: rgb(255, 0, 0);                /* zvýraznění při přejetí */
  transform: scale(1.05);               /* lehké zvětšení */
}

.texty_muzika2 {
  font-size: clamp(8px, 1vw, 20px); /* minimálně 12px, plynule podle šířky, maximálně 20px */
  position: absolute;
  z-index: 10;
  padding: clamp(5px, 1vw, 15px);
  border-radius: clamp(2px, 0.5vw, 8px);
  top: 50%;
  left: 65%;
  transform: translate(-50%, -50%);
  text-align: center;
}


.slovo_kazanicka a {
  position: absolute;
  z-index: 10;
  color: rgb(180, 0, 0);
  font-size: 30px;
  padding: 10px;
  border-radius: 8px;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
  display: inline;       /* odkaz je jen kolem textu */
  width: auto;           /* šířka podle obsahu */
  height: auto;          /* výška podle obsahu */
  padding: 0;            /* žádné zbytečné okraje */
  margin: 0; 
}




/*Muzika*/

.muzika-container {
  position: relative;
  width: 90%;
  max-width: 1200px;
  min-width: 350px;
  margin: 150px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popredi-muzika {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.muzika {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.muzika a {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: clamp(16px, 2vw, 28px);
  color: rgb(180, 0, 0);
  font-family: 'Times New Roman', Times, serif;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.muzika a:hover {
  color: rgb(255, 0, 0);
}

@media (max-width: 768px) {
  .muzika-container {
    width: 80%;
  }
}






.nadpis-cerveny {
  text-align: left;
  color: red;
}
.nadpis-cerny {
  text-align: left;
  color: red;
}

.muzika-sloup1 {
  position: absolute;
  z-index: 10;
  padding: 10px;
  border-radius: 8px;
  top: 95%;
  left: 35%;
  font-size: 15px;
  color: black;
  font-family: 'Times New Roman', Times, serif;
  transform: translate(-50%, -50%);
  text-align: top;
}

.audio-blok {
  margin-bottom: 20px;
}

.muzika-sloup2 {
  position: absolute;
  z-index: 10;
  padding: 10px;
  border-radius: 8px;
  top: 95%;
  left: 65%;
  font-size: 15px;
  color: black;
  font-family: 'Times New Roman', Times, serif;
  transform: translate(-50%, -50%);
  text-align: top;
}

.muzika-armenske {
  position: absolute;
  z-index: 10;
  padding: 10px;
  border-radius: 8px;
  top: 30%;
  left: 35%;
  font-size: 15px;
  color: black;
  font-family: 'Times New Roman', Times, serif;
  transform: translate(-50%, -50%);
  text-align: top;
}

.muzika-gruzinske1 {
  position: absolute;
  z-index: 10;
  padding: 10px;
  border-radius: 8px;
  top: 75%;
  left: 35%;
  font-size: 15px;
  color: black;
  font-family: 'Times New Roman', Times, serif;
  transform: translate(-50%, -50%);
  text-align: top;
}

.muzika-gruzinske2 {
  position: absolute;
  z-index: 10;
  padding: 10px;
  border-radius: 8px;
  top: 75%;
  left: 65%;
  font-size: 15px;
  color: black;
  font-family: 'Times New Roman', Times, serif;
  transform: translate(-50%, -50%);
  text-align: top;
}

.muzika-koptske1 {
  position: absolute;
  z-index: 10;
  padding: 10px;
  border-radius: 8px;
  top: 70%;
  left: 35%;
  font-size: 15px;
  color: black;
  font-family: 'Times New Roman', Times, serif;
  transform: translate(-50%, -50%);
  text-align: top;
}

.muzika-koptske2 {
  position: absolute;
  z-index: 10;
  padding: 10px;
  border-radius: 8px;
  top: 63%;
  left: 65%;
  font-size: 15px;
  color: black;
  font-family: 'Times New Roman', Times, serif;
  transform: translate(-50%, -50%);
  text-align: top;
}



.muzika-recke {
  position: absolute;
  z-index: 10;
  padding: 10px;
  border-radius: 8px;
  top: 100%;
  left: 65%;
  font-size: 15px;
  color: black;
  font-family: 'Times New Roman', Times, serif;
  transform: translate(-50%, -50%);
  text-align: top;
}

.muzika-recke-istocnik1 {
  position: absolute;
  z-index: 10;
  padding: 10px;
  border-radius: 8px;
  top: 100%;
  left: 35%;
  font-size: 15px;
  color: black;
  font-family: 'Times New Roman', Times, serif;
  transform: translate(-50%, -50%);
}

.muzika-recke-istocnik2 {
  position: absolute;
  z-index: 10;
  padding: 10px;
  border-radius: 8px;
  top: 100%;
  left: 65%;
  font-size: 15px;
  color: black;
  font-family: 'Times New Roman', Times, serif;
  transform: translate(-50%, -50%);
}

.muzika-recke-lavra1 {
  position: absolute;
  z-index: 10;
  padding: 10px;
  border-radius: 8px;
  top: 100%;
  left: 35%;
  font-size: 15px;
  color: black;
  font-family: 'Times New Roman', Times, serif;
  transform: translate(-50%, -50%);
}

.muzika-recke-lavra2 {
  position: absolute;
  z-index: 10;
  padding: 10px;
  border-radius: 8px;
  top: 98%;
  left: 65%;
  font-size: 15px;
  color: black;
  font-family: 'Times New Roman', Times, serif;
  transform: translate(-50%, -50%);
}

.muzika-recke-sinaj1 {
  position: absolute;
  z-index: 10;
  padding: 10px;
  border-radius: 8px;
  top: 90%;
  left: 35%;
  font-size: 15px;
  color: black;
  font-family: 'Times New Roman', Times, serif;
  transform: translate(-50%, -50%);
}

.muzika-recke-sinaj2 {
  position: absolute;
  z-index: 10;
  padding: 10px;
  border-radius: 8px;
  top: 83%;
  left: 65%;
  font-size: 15px;
  color: black;
  font-family: 'Times New Roman', Times, serif;
  transform: translate(-50%, -50%);
}



.muzika-slovanske {
  position: absolute;
  z-index: 10;
  padding: 10px;
  border-radius: 8px;
  font-size: 15px;
  color: black;
  font-family: 'Times New Roman', Times, serif;
  transform: translate(-50%, -50%);
  text-align: center;
}

h3 {
  color: rgba(0, 0, 0, 0.267);
}



/*chram*/
.chram-container {
  position: relative;
  width: 70%;
  max-width: 1200px;
  min-width: 350px;
  margin: 50px auto;
}

.chram-container img {
  width: 100%;
  height: auto;
  display: block;
}

.chram-buttons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.chram-button {
  position: absolute;
  width: 15%; /* Nebo jiná hodnota podle potřeby */
  height: auto;
  transform: translate(-50%, -50%);
}

.chram-button img {
  width: 55%;
  height: auto;
}

/* Pozice tlačítek v procentech */
.liturgie-btn { top: 15%; left: 13%; }
.tajiny-btn { top: 15%; left: 25%; }
.zpevy-btn { top: 15%; left: 80%; }
.slovo-btn { top: 15%; left: 92%; }





/*Slovo*/

.slovo-container {
  position: relative;
  width: 60%;
  max-width: 1200px;
  min-width: 400px;
  margin: 50px auto;
}

.popredi-slovo {
  width: 100%;
  height: auto;
  display: block;
}

.slovo-odkazy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slovo-link {
  position: absolute;
  color: rgb(180, 0, 0);
  font-family: 'Times New Roman', Times, serif;
  font-size: clamp(16px, 2vw, 30px);
  text-decoration: none;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

/* Pozice jednotlivých roků */
.rok-2014 { top: 27%; left: 14%; }
.rok-2015 { top: 27%; left: 38%; }
.rok-2016 { top: 27%; left: 62%; }
.rok-2017 { top: 27%; left: 86%; }
.rok-2018 { top: 49%; left: 14%; }
.rok-2019 { top: 49%; left: 38%; }
.rok-2020 { top: 49%; left: 62%; }
.rok-2021 { top: 49%; left: 86%; }
.rok-2022 { top: 72%; left: 14%; }
.rok-2023 { top: 72%; left: 38%; }
.rok-2024 { top: 72%; left: 62%; }
.rok-2025 { top: 72%; left: 86%; }

.slovo-link:hover {
  color: rgb(255, 0, 0);
}




/*ZAHRADA*/

.zahrada-container {
  position: relative;
  width: 70%;
  max-width: 1200px;
  min-width: 350px;
  margin: 50px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
}

.popredi-zahrada {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.zahrada-odkazy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.zahrada-link {
  position: absolute;
  color: rgb(255, 255, 255);
  font-family: 'Times New Roman', Times, serif;
  font-size: clamp(10px, 2vw, 28px);
  text-decoration: none;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

/* Pozice jednotlivých odkazů */
.antonis { top: 18%; left: 35%; }
.poimen { top: 25%; left: 25%; }
.izaias { top: 53%; left: 21%; }
.mnozi { top: 66%; left: 37%; }
.synklitis { top: 18%; left: 69%; }
.makarios { top: 21%; left: 80%; }
.arsenios { top: 32%; left: 61%; }
.mojzis { top: 40%; left: 69%; }
.bisarion { top: 58%; left: 70%; }

.zahrada-link:hover {
  color: rgb(200, 200, 200);
}



/*CD pujcovna stesti*/

.CD-pujcovna-container {
  position: relative;
  width: 70%;
  max-width: 1200px;
  min-width: 400px;
  margin: 150px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popredi-pujcovna {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.muzika-CD {
  position: absolute;
  z-index: 10;
  padding: 10px;
  border-radius: 8px;
  font-size: clamp(12px, 1.5vw, 20px);
  color: black;
  font-family: 'Times New Roman', Times, serif;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 25%;
}

.muzika-CD audio {
  width: 100%;
  min-width: 150px;
  max-width: 250px;
  height: clamp(30px, 4vw, 50px);
}

@media (max-width: 768px) {
  .muzika-CD {
    width: 30%; /* Větší relativní šířka na menších obrazovkách */
  }
}





/*CD drogarna*/

.CD-drogarna-container {
  position: relative;
  width: 70%;
  max-width: 1200px;
  min-width: 400px;
  margin: 150px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popredi-drogarna {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.drogarna-odkazy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.drogarna-track {
  position: absolute;
  z-index: 10;
  padding: 10px;
  border-radius: 8px;
  font-size: clamp(12px, 1.5vw, 20px);
  color: black;
  font-family: 'Times New Roman', Times, serif;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 25%;
}

.drogarna-track p {
  margin: 0 0 5px 0;
  white-space: nowrap;
}

.drogarna-track audio {
  width: 100%;
  min-width: 150px;
  max-width: 250px;
  height: clamp(30px, 4vw, 50px);
}

@media (max-width: 768px) {
  .drogarna-track {
    width: 30%;
  }
}



/*CD arsenij*/

.CD-arsenij-container {
  position: relative;
  width: 70%;
  max-width: 1200px;
  min-width: 400px;
  margin: 150px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popredi-arsenij {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.arsenij-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  width: 80%;
  gap: 3%;
  padding: 20px;
}

.arsenij-sloupec1{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8vw;
  position: relative;
  left: -5%;
}
.arsenij-sloupec2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8vw;
  position: relative;
  left: 5%;
}

.arsenij-sloupec1 p,
.arsenij-sloupec2 p {
  margin: 0.2em 0;
  font-size: clamp(12px, 1.5vw, 20px);
  color: black;
  font-family: 'Times New Roman', Times, serif;
  white-space: nowrap;
}

.arsenij-sloupec1 audio,
.arsenij-sloupec2 audio {
  width: 100%;
  min-width: 150px;
  max-width: 250px;
  height: clamp(30px, 4vw, 50px);
}

@media (max-width: 768px) {
  .arsenij-wrapper {
    width: 90%;
  }
}



/*Muzika podst*/

.muzika2-container {
  position: relative;
  width: 80%;
  max-width: 1200px;
  margin: 40px auto;
  box-sizing: border-box;
}

/* hlavní "canvas" obrázek */
.muzika2-container .popredi-muzika {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none; /* obrázek nebere kliknutí, overlay ano */
}

/* overlay přes celý obrázek — zde umisťujeme položky */
.ms-overlay {
  position: absolute;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  height: 100%;
  pointer-events: none;     /* default — jednotlivé .ms-item budou mít pointer-events:auto */
  z-index: 5;
}

/* obecné pro jednotlivé prvky umístěné na canvasu */
.ms-item {
  position: absolute;
  transform: translate(-50%, -50%); /* středí prvek přes top/left */
  pointer-events: auto;             /* umožní interakci */
  z-index: 10;
  text-align: center;
}

/* odkazy bez bílého pozadí */
.ms-link {
  background: transparent;
  padding: 0.25rem 0.5rem;
  color: rgb(180,0,0);
  text-decoration: none;
  font-family: 'Times New Roman', Times, serif;
  font-size: clamp(16px, 2.5vw, 24px);
  text-shadow: 0 1px 2px rgba(255,255,255,0.6); /* pro čitelnost na obrázku */
  border-radius: 4px;
  display: inline-block;
  z-index: 15;
}

/* viditelná, ale ne-bílá zvýraznění při hoveru */
.ms-link:hover {
  color: rgb(255,0,0);
}

.ms-audio {
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.ms-audio audio {
  background: rgba(255,255,255,0.9);
  border: 1px solid #ccc;
  width: clamp(260px, 45vw, 380px);
  height: clamp(28px, 5.5vw, 40px);
  height: 32px;
  display: block;
  border-radius: 4px;
  z-index: 12;
}

/* krátký popisek nad audiem (volitelně) */
.ms-caption {
  /* Základní nastavení (pro PC) */
  margin: 0 0 0.3rem 0; /* Na PC klidně malá mezera být může */
  font-family: 'Times New Roman', Times, serif;
  color: #222;
  background: rgba(255,255,255,0.8);
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  font-size: clamp(12px, 1.8vw, 16px);
}

/* --- ÚPRAVA PRO MOBILY --- */
@media (max-width: 768px) {
  .ms-caption {
    /* Na mobilu zrušíme mezeru pod textem úplně */
    margin: 0 0 0 0; 
    
    /* Zmenšíme i vnitřní okraj, aby byl rámeček textu nižší */
    padding: 0.1rem 0.2rem; 
    
    /* Můžeme i nepatrně zmenšit výšku řádku */
    line-height: 1.1;
  }
  
  /* Pokud bys chtěl zmenšit mezeru i pod samotným přehrávačem (audio), přidej toto: */
  .ms-audio audio {
     margin-bottom: 2px; 
     height: 35px; /* Přehrávač bude na výšku trochu kompaktnější */
  }
}

/* pokud nechceš bílé popisky, změň background na transparent */
.ms-caption.transparent { background: transparent; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }

/* video styling */
.ms-video video {
  width: min(380px, 45%);
  height: auto;
  display: block;
  border: none;
  background: transparent;
}



/* mobilní úpravy */
@media (max-width: 768px) {
  .muzika2-container { width: 95%; margin: 20px auto; }
  .ms-audio audio { width: clamp(240px, 65vw, 200px); height: clamp(26px, 6vw, 32px); }
  .ms-link { font-size: clamp(12px, 3.5vw, 16px); }
  .ms-caption { font-size: clamp(11px, 3.5vw, 14px); background: rgba(255,255,255,0.9); }
}