body {
    font-family: Arial, sans-serif;
    background-image: url('pisne/pozadi.png');
    background-color: #f4f4f4;
    color: #333;
    cursor: url('pisne/kurzor.png'), auto; /* Vlastní kurzor */
    width: 100vw;
    height:100vh;
    overflow-y: auto;
    margin: 0;
}

h1, h2, p, .extra-info {
    color: #d2691e;
    text-align: center;
    cursor: url('pisne/kurzor.png'), auto; /* Vlastní kurzor pro text */
}

h1 {
   margin: 0;
   padding: 1em;;
}


.audio-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    padding: 20px;
    max-width:60em;
    width: auto;
    box-shadow: 25px 30px 49px 7px rgba(0,0,0,0.44);
    cursor: url('pisne/kurzor.png'), auto; /* Vlastní kurzor pro kontejner */
}

.audio-item {
    margin-bottom: 20px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: url('pisne/kurzor.png'), auto; /* Vlastní kurzor pro audio položky */
}

.audio-item:last-child {
    border-bottom: none;
}

.audio-title {
    font-size: 1.2em;
    margin-bottom: 10px;
    cursor: url('pisne/kurzor.png'), auto; /* Vlastní kurzor pro názvy */
}

audio {
    width: min(100%, 25em);
    margin: 0 auto;
    outline: none;
    cursor: url('pisne/kurzor.png'), auto; /* Vlastní kurzor pro přehrávače */
}

.download-link {
    font-size: 0.9em;
    color: #d2691e;
    cursor: url('pisne/kurzor.png'), auto; /* Vlastní kurzor pro odkazy */
}

.download-link:hover {
    cursor: url('pisne/kurzor2.png'), auto; /* Změna kurzoru při hoveru pro odkazy */
}

/* Přidáme styl pro tlačítka */
.audio-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    cursor: url('pisne/kurzor.png'), auto; /* Vlastní kurzor pro tlačítka */
}

/* Výchozí kurzor pro odkaz */
.song-link {
    cursor: url('pisne/kurzor.png'), auto;
}

/* Změna kurzoru při najetí myší na odkaz */
.song-link:hover {
    cursor: url('pisne/kurzor2.png'), auto;
}

.buttonCont {
   background-color: #d2691e; 
   color: white; 
   padding: 1em 2em;
   text-decoration: none; 
   border-radius: 5px;
   max-width: 10em;
   margin: 2em auto;
   box-shadow: 6px 6px 49px -17px rgba(0,0,0,0.44);
}
.buttonCont a {
   text-decoration: none;
   color: white;
   text-decoration: none; 
}
a {
    text-decoration: none;

 }

.button {
    background-color: #d2691e;
    text-align: center;
    
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: url('pisne/kurzor.png'), auto; /* Vlastní kurzor pro tlačítka */
    transition: all 0.5s;
}

.buttonCont:hover {
    background-color: #a0a139;
    cursor: url('pisne/kurzor2.png'), auto; /* Změna kurzoru při hoveru pro tlačítka */
    transition: all 0.5s;
}
.container {
    display: flex; /* Aktivuje Flexbox */
    justify-content: flex-start; /* Zarovná položky na začátek (vlevo) */
    align-items: center; /* Vertikální zarovnání na střed */
    padding: 20px; /* Odsazení uvnitř kontejneru */
    background-color: #f0f0f0; /* Volitelná barva pozadí */
}

.etraContainer {
   display: flex;
   flex-flow: row;
   flex-wrap: wrap;
   max-width: min(100vw, 60em);
   width: auto;
}

.extra-info {
    margin: 10px; /* Odsazení kolem obrázků */
    /* flex: 0 1 auto; /* Zabrání růstu položek, ale umožní jim se zmenšovat */
    flex-grow: 1;
    flex-shrink: 1;
    max-width: min(100vw, 60em);
}

.audioCont {
   width: 100%;
   display: flex;
}
.extra-text {
   width: 25em;
}
.extra-img {
   width: 25em;
}

.extra-info img {
   margin: auto;
    max-width: 100%; /* Obrázky se přizpůsobí šířce rodičovského elementu */
    height: auto; /* Zachová správný poměr stran obrázků */
    border-radius: 5px; /* Volitelné: zaoblené rohy obrázků */
}

.rightImage {
   background-image: url("pf2025.svg");
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
   flex-grow: 1;
}

.cols {
   display: flex;
   width: 100%;
}
.obsah {
   flex-grow: 1;
}


@media (max-width: 50em) {
   .cols {
      flex-flow: column-reverse;
   }
   .obsah {
      width: 100%;
   }
   
   .rightImage {
      min-height: 60vh;
      max-height: 80vh;
   }
}

@media (min-width: 50em) {
   .cols {
      flex-flow: row;
      width: 100%;
   }
   .obsah {
      min-width: 30%;
      max-width: 50%;
   }
   
   .rightImage {
      min-height: 500px;
      min-width: 50%;
   }

}