html, body {          /* Nastavenie výšky pre celé telo a html */
    height: 100%; 
}


body {                                 /* Flexbox na telo stránky pre rozloženie obsahu vo vertikálnom smere */
    display: flex;
    flex-direction: column;            /* Nastaví smer flexboxu na stĺpec vertikálne */
    min-height: 100vh;                 /* Minimálna výška tela je 100% výšky okna prehliadača */
}


header {                                            /* Hlavný štýl pre hlavičku stránky */
    background-color: rgb(242, 199, 87);              /* Nastavenie pozadia hlavičky */
    padding: 20px;                                      /* Vnútorné odsadenie v hlavičke */
    border-bottom: 2px solid #8b8313;                 /* Spodný okraj hlavičky */
    text-align: center;                                 /* Zarovná text na stred */
}


nav {                                                 /* Štýly pre navigačný zoznam */
    background-color: rgb(242, 199, 87);                 /* Pozadie navigácie */
    display: block;                                        /* Umožní zobraziť navigačné prvky na nových riadkoch */          
}


nav li {                                              /* Upravuje vzhľad položiek v navigácii */
    display: inline;                                      /* Položky navigácie sú zobrazené vedľa seba */
    margin-right: 15px;                                   /* Medzera medzi položkami navigácie */
}


nav ul {                                              /* Odstráni bodky z nečíslovaných zoznamov */
    list-style-type: none;                                /* Zrušenie bodiek zo zoznamu */
    margin: 10px 0 0 0;                                   /* Nastavenie vonkajšieho okraja */
}


nav a {                                                     /* Štýl pre odkazy v navigácii */
    display: inline-block;                                     /* Zobrazenie odkazu ako blok, ktorý sa správa ako inline */
    padding: 10px 20px;                                        /* Vnútorné odsadenie v odkaze */
    text-decoration: none;                                     /* Odstránenie podčiarknutia */
    color: #f5f5dc;                                          /* Farba textu */
    background-color: red;                                   /* Pozadie odkazu */
    border-radius: 5px;                                        /* Zaoblené rohy odkazu */
    font-weight: bold;                                         /* Tučný text */
}


.active {                                           /* Aktívny odkaz má iné pozadie */
    background-color: darkred;
}


main {                                                 /* Hlavný obsah stránky */
    flex: 1;                                                /* Hlavný obsah zaberá dostupný priestor */
    padding: 20px;                                          /* Vnútorné odsadenie */
    background-color: lightcoral;                         /* Pozadie hlavného obsahu */
}


article {                                     /* Štýl pre article */
    flex: 3;                                       /* Article zabera 3/4 dostupného miesta */
    padding: 20px;                                 /* Vnútorné odsadenie articlu */
}


#MainKontakt {                   /* Nastavenie main v podstranke kontakt */
    display: flex;                 /* Flexbox na usporiadanie */
}


aside {                                         /* Štýl pre bočný panel */
    flex: 1;                                        /* Bočný panel zabiera 1/4 miesta */
    background-color: rgb(204, 60, 62);           /* Pozadie bočného panelu */
    padding: 20px;
    padding-top: 5px;                               /* horne vnútorné odsadenie*/
    border: 4px solid black;                      /* Čierny okraj */
    border-radius: 15px;                            /* Zaoblené rohy */
}


footer {                               /*Nastavenie pre footer stránky */
    display: block;                        /* Zobrazenie päty ako blok */
    clear: both;                           /* Zabezpečí, že nebude dochádzať k prekrytiu s predchádzajúcimi prvkami */
    width: 100%;                           /* Nastavenie šírky na 100% */
    text-align: center;                    /* Zarovná text na stred */
    background-color: yellow;            /* Pozadie pre footer */
    padding: 10px 0;                       /* Vnútorné odsadenie */
    margin-bottom: 10px;                   /* Spodný okraj */
    border-top: 3px double black;        /* Vrchný okraj, dvojitý a čierny*/
}


.footer {                                    /* Vzhľad pre footer */
    background-color: rgb(204, 60, 62);        /* Pozadie pre footer */
    margin-bottom: 0;                            /* Odstránenie spodného okraja */
}


.foto:hover {                              /* Efekt na obrázkoch pri prechode myšou */
    transform: scale(1.05);                       /* Zväčší obrázok*/
    border-radius: 20px;                          /* Zaoblenie rohov obrázka*/
}


.foto {                                         /* Vzhľad obrázkov */
    border-style: solid;                           /* Okraj obrázka */
    border-color: black;                         /* Čierny okraj obrázka */
    border-width: 2px;                             /* Hrúbka okraja */
    height: 500px;                                 /* Nastavenie výšky obrázka */
}


table, th, td {                         /* Nastavenie štýlu pre tabuľky */
    border: 2px solid red;                    /* Červený okraj pre tabuľku, hlavičky a bunky */
    border-collapse: collapse;                  /* Spojenie okrajov tabuľky */
    width: 20%;                                 /* Šírka tabuľky */
}


th, td {                                             /* Nastavenie pozadia pre tabuľkové bunky */
    background-color: rgb(242, 199, 87);              /* Pozadie pre tabuľkové bunky */
}


.FotoTab {                      /* Štýl pre obrázky v tabuľkách */
    max-height: 200px;              /* Maximálna výška obrázkov v tabuľkách */
    height: auto;                   /* Výška obrázkov sa prispôsobí*/
}


#Nadpis1 {                          /* Nastavenie veľkosti a pozadia pre nadpisy */
    font-size: 30px;                    /* Veľkosť písma nadpisu */
    background-color: red;            /* Pozadie nadpisu */
}


#Nadpis2 {                               /* Nastavenie farby a veľkosti písma pre nadpis 2 */
    color: rgb(255, 217, 0);                /* Farba písma nadpisu */
    font-size: 30px;                          /* Veľkosť písma nadpisu */
}


#Nadpis3 {                 /* Nastavenie farby a veľkosti písma pre nadpis 3 */
    font-size: 30px;                /* Veľkosť písma nadpisu */
    color: rgb(195, 57, 60);      /* Farba písma nadpisu */
}


#mapa {                                              /* Štýl pre obrázkovú mapu */
    border-style: solid;                                 /* Okraj obrázku */
    border-color: black;                               /* Farba okraja obrázku */
    background-color: rgb(242, 199, 87);               /* Pozadie obrázka */
    border-width: 2px;                                   /* Hrúbka okraja obrázka */
    float: right;                                        /* Obrázok sa zobrazuje napravo od textu */
}


#video {                           /* Nastavenie prehrávača videa */
    width: 100%;                        /* Nastavenie šírky na 100% */
    height: 350px;                      /* Nastavenie výšky videa */
    border: none;                       /* Žiadny okraj */
    border-radius: 8px;                 /* Zaoblené rohy videa */
}


#VideoSection {                                              /* Štýl pre sekciu s videom */
    width: 100%;                                                     /* Šírka sekcie */
    max-width: 650px;                                                /* Maximálna šírka sekcie */
    padding: 10px;                                                   /* Vnútorné odsadenie */
    background-color: #f5f5dc;                                     /* Pozadie sekcie */
    border-radius: 10px;                                             /* Zaoblené rohy sekcie */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);                    /* Jemný tieň okolo sekcie */
}