body { 
    font-family: Arial, sans-serif; /* Font textu na stránce */
    background-color: #f2f2f2; /* Barva pozadí stránky */
    color: #333; /* Základní barva textu */
    margin: 0; /* Odstraní výchozí okraje stránky */
    padding: 0; /* Odstraní výchozí odsazení stránky */
    background-image: url('Fotky/background2.png'); /* Nastaví obrázek na pozadí */
    background-size: cover; /* Roztáhne obrázek, aby pokryl celé pozadí */
    background-position: center; /* Vycentruje obrázek pozadí */
    background-repeat: no-repeat; /* Zabrání opakování obrázku */
}

header {
    background-color: #0056b3; /* Nastaví modré pozadí headeru */
    display: flex; /*  Použití Flexboxu pro uspořádání prvků */
    color: white; /* Barva textu */
    text-align: center; /* Zarovná text na střed */
    padding: 20px; /* Přidá vnitřní odsazení */
}

.logo {
    width: 100px; /* Nastaví šířku loga */
    margin-left: 30px; /* Přidá odsazení vlevo od loga */
}

.text {
    margin: auto; /* Vycentruje text v rámci Flexboxu */
}

.content {
    display: flex; /* Použití Flexboxu pro uspořádání obsahu */
    flex-wrap: wrap; /* Umožní přetékání prvků na další řádek */
    justify-content: center; /* Zarovná obsah na střed */
    margin: 20px; /* Přidá vnější odsazení */
}

.content h2 {
    color: #0056b3; /* Nastaví modrou barvu nadpisů */
}

.box-info {
    display: flex; /* Používá Flexbox pro rozložení textu a obrázku vedle sebe */
    justify-content: space-between; /* Rozloží obsah na levou a pravou stranu */
    background-color: white; /* Barva pozadí boxu */
    width: 60%; /* Nastaví šířku boxu */
    margin: 10px; /* Přidá vnější odsazení kolem boxu */
    padding: 15px; /* Přidá vnitřní odsazení uvnitř boxu */
    border-radius: 8px; /* Zaoblení rohů boxu */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Přidá jemný stín pod box */
}

.text2 {
    margin-top: 5px; /* Přidá menší odsazení nahoře */
}

.photo1 {
    width: 25%; /* Nastaví šířku obrázku jako 25% šířky boxu */
}

.box-harm {
    background-color: white; /* Nastaví bílé pozadí boxu */
    width: 35%; /* Nastaví šířku boxu */
    margin: 10px; /* Přidá vnější odsazení kolem boxu */
    padding: 15px; /* Přidá vnitřní odsazení uvnitř boxu */
    border-radius: 8px; /* Zaoblení rohů boxu */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Přidá jemný stín */
}

 /* Stejné jako `.box-harm` */
.box-inter{
    background-color: white;
    width: 35%;
    margin: 10px;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.box-sponsor {
    text-align: center; /* Zarovná nadpis a text na střed */
    padding: 15px; /* Přidá vnitřní odsazení */
    width: 28.5%; /* Nastaví šířku boxu */
    margin: 10px; /* Přidá vnější odsazení */
    background-color: white; /* Nastaví bílé pozadí */
    border-radius: 8px; /* Zaoblení rohů */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Jemný stín */
}
  
.box-sponsor h2{
    margin-bottom: 10px; /* Nastaví odsazení dole */
}
  
.box-sponsor p{
    margin: 10px; /* Nastaví svislé odsazení */
}
  
.box-sponsor img{
    max-width: 100px; /* Nastaví maximální šířku obrázků */
    height: auto; /* Zachová proporce obrázků */
    margin: 10px; /* Mezera kolem každého obrázku */
}
  
.box-sponsor .sponsor-logos{
    display: flex;
    justify-content: center; /* Zarovná obrázky na střed */
    flex-wrap: wrap; /* Umožní přetékání na další řádek na menších obrazovkách */
    gap: 20px; /* Mezera mezi obrázky */
    margin-top: 20px;
}

 /* Stejné jako `.box-info` */
.box-contact{
    background-color: white;
    width: 60%;
    margin: 10px;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.box-contact h2{
    display: flex; 
    justify-content: center; /* Zarovnání do středu */
}

.box-contact p{
    display: flex;
    justify-content: center; /* Zarovná každý odstavec horizontálně do středu */
}

.box-lepsi {
    text-align: center; /* Zarovná obsah na střed */
    padding: 15px; /* Vnitřní odsazení kolem obsahu */
    margin: 10px; /* Vnější odsazení od okolních prvků */
    border-radius: 8px; /* Zaoblené rohy */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Jemný stín kolem boxu */
    background-color: white; /* Barva pozadí */
    width: 28.5%; /* Šířka boxu */
}
  
.box-lepsi h2{
    margin-bottom: 10px; /* Nastaví odsazení dole */
}
  
.box-lepsi p{
    margin-bottom: 20px; /* Nastaví odsazení dole */
}
  
.box-lepsi a{
    text-decoration: none; /* odstraní podtržení, atd. u odkazů */
}

.lepsi{
    display: block; /* Zajistí, že obrázek bude jako blokový prvek */
    margin: 0 auto; /* Vycentruje obrázek horizontálně */
    max-width: 220px; /* Maximální šířka obrázku, přizpůsobí se kontejneru */
    height: auto; /* Zachová proporce obrázku */
}

footer {
    background-color: #333; /* Barva pozadí footeru */
    color: white; /* Barva textu */
    text-align: center; /* Text zarovnaný na střed */
    padding: 10px; /* Vnitřní odsazení */
    font-size: 0.9em; /* Zmenšené písmo */
}

 /* Pro mobily (široké do 604px) */
@media (max-width: 600px) { 
    h1 {
        font-size: 24px;
    } /* Zmenší nadpis na mobilu */
    .container {
        padding: 10px; 
    } /* Zmenší odsazení */
}
  
  /* Pro tablety (široké mezi 601px a 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
    h1 {
        font-size: 28px;
    } /* Nadpis střední velikosti */
    .container {
        padding: 20px;
    } /* Větší odsazení */
}

  /* Pro počítače (široké více než 1024px) */
  @media (min-width: 1025px) {
  
    h1 {
      font-size: 36px; /* Větší písmo pro počítač */
    }
  }