/* Globálne štýly */
*,
*::before,
*::after {
    box-sizing: border-box; /* Zabezpečí, že padding a border sa počítajú do rozmerov elementu */
    margin: 0;  /* Nastaví nulové okraje pre všetky elementy */
    padding: 0;   /* Nastaví nulový padding pre všetky elementy */
}

/* Základné štýly pre html a body */
html, body {
    height: 100%; /* Umožňuje telu zobraziť všetok obsah */
    min-height: 100vh; /* Zabezpečuje, že stránka má vždy minimálnu výšku ako obrazovka */
    font-family: Arial, sans-serif; /* Základný font pre stránku */
    font-size: 20px;
    background-color: rgb(235, 247, 249); /* Svetlá farba pozadia */
    color: #17191a; /* Tmavšia farba textu */
    margin: 0;
    padding: 0;
}

/* Hlavný kontajner */
main {
    background-color: #d4e7f9; /* pozadie */
    color: #333; 
    padding: 20px;
    border-radius: 8px; /* Zaoblené rohy pre moderný vzhľad */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Jemný tieň okolo kontajnera */
    width: 70%;
    max-width: 80%;
    margin: 20px auto; /* Zarovná na stred a pridáva okraje */
}

/* Nadpisy */
h1 {
    font-size: 2.00em; /* Nastaví veľkosť písma hlavného nadpisu relatívne k základnej veľkosti */
    font-weight: bold; /* Zabezpečí, že text bude tučný */
    color: #2E86C1; /* Modrá farba pre hlavné nadpisy */
}


h2 {
    font-size: 1.75em;
    font-weight: bold;
    color: #28B463; 
}

h3 {
    font-size: 1.50em;
    font-weight: bold;
    color: #D35400; 
}

/* Médiá (obrázky, video) */
img, video {
    display: block; /* Zabezpečí, že média budú zobrazené ako blok */
    margin: 20px auto; /* Stredové zarovnanie */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Jemný tieň okolo obrázkov a videí */
}

img {
    width: 800px;
    height: 400px;
    border-radius: 15px; /* Zaoblené rohy pre obrázky */
    border: 5px solid #000; /* Tmavý rám okolo obrázkov */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efekt pri hoverovaní */
}

img:hover {
    transform: scale(1.1); /* Zväčšenie obrázku pri hoverovaní */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Silnejší tieň pri hoverovaní */
}

/* Video */
#video {
    width: 25%; /* Šírka videa */
    height: 30%; /* Výška videa */
    max-width: 40%; /* Maximálna šírka */
}

/* Audio */
audio {
    background-color: #f0f0f0;
    border-radius: 10px;
    width: 40%; /* Šírka audio prehrávača */
}


/* Štýly pre obrázkovú mapu */
area {
    outline: none; /* Zbaviť sa defaultného obrysu pri kliknutí */
    cursor: crosshair; /* Zmena kurzora na ruku */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Efekt pri hoverovaní */
}

/* google map */
.mapa iframe {
    width: 100%; /* Nastaví šírku mapy na 100% šírky rodičovského kontajnera */
    height: 500px; /* Nastaví výšku mapy na fixnú hodnotu */
    border: none; /* Odstráni rámček okolo mapy */
    border-radius: 8px; /* Voliteľné: zaoblenie rohov */
}

/* Tabuľky */
table {
    width: 100%; /* Nastavuje šírku tabuľky na 100% rodičovského kontajnera */
    border-collapse: collapse; /* Zlúčenie hraníc medzi bunkami (bez medzier medzi hranicami) */
    margin: 20px auto; /* Zarovnáva tabuľku na stred a pridáva okraje */
    box-shadow: 0 2px 4px rgba(220, 11, 11, 0.1); /* Jemný tieň okolo tabuľky pre lepší vzhľad */
}

/* Hlavičky a bunky tabuľky */
th, td {
    padding: 12px; /* Pridáva vnútorné okraje do buniek (väčší priestor vnútri buniek) */
    text-align: center; /* Zarovnáva text do stredu v bunkách */
    font-size: 16px; /* Nastavuje veľkosť písma pre bunky tabuľky */
    border: 1px solid #122a04; /* Pridáva hranice (okraje) buniek s tmavozelenou farbou */
}

/* Striedanie farieb riadkov pre lepšiu čitateľnosť */
table tr:nth-child(odd) td {
    background-color: #eef1ec; /* Svetlá farba pozadia pre nepárne riadky */
}

table tr:nth-child(even) td {
    background-color: #beb8c0; /* Tmavšia farba pozadia pre párne riadky */
}


/* Hlavička */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 20px;
    background-image: url('../images/fotka12.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    box-sizing: border-box;
}

/* Logo v hlavičke */
header .logo {
    width: 100px;
    height: 100px;
    object-fit: contain; /* Zachováva pomer strán loga */
}

/* Navigačné menu */
header nav {
    display: flex; /* Nastavuje flexibilné usporiadanie prvkov v navigácii */
    justify-content: center; /* Zarovná navigačné odkazy na stred vodorovne */
    align-items: center; /* Zarovná navigačné odkazy na stred zvisle */
    gap: 30px; /* Určuje medzeru medzi položkami v navigácii */
    width: 100%; /* Šírka navigačného menu je 100% šírky rodičovského elementu */
}

/* Odkazy v navigácii */
header nav a {
    text-decoration: none; /* Odstraňuje podčiarknutie textu v odkazoch */
    color: #0a0000; /* Nastavuje farbu textu v odkazoch na tmavú */
    font-size: 28px; /* Nastavuje veľkosť písma pre odkazy */
    padding: 5px 10px; /* Pridáva vnútorné okraje pre odkazy */
}

/* Efekt pri hoverovaní na odkaz */
header nav a:hover {
    background-color: #d5f1d6; /* Nastavuje pozadie odkazu pri hoverovaní */
    border-radius: 4px; /* Zaobľuje rohy odkazu pri hoverovaní */
}

/* Usporiadanie položiek v zozname (ul) v navigácii */
header nav ul {
    display: flex; /* Nastavuje flexibilné usporiadanie položiek v zozname */
    list-style: none; /* Odstraňuje predvolené odrážky zo zoznamu */
    margin: 0; /* Odstraňuje vonkajšie okraje zo zoznamu */
    padding: 0; /* Odstraňuje vnútorné okraje zo zoznamu */
}

/* Usporiadanie jednotlivých položiek v zozname (li) */
header nav li {
    margin-right: 30px; /* Pridáva medzeru medzi položkami v zozname */
}

/* Bez pravého okraja pre poslednú položku v zozname */
header nav li:last-child {
    margin-right: 0; /* Odstraňuje pravý okraj pre poslednú položku */
}

/* Obsahové bloky */
article, section {
    padding: 20px;
    line-height: 2.5; /* Zlepšuje čitateľnosť */
    margin: 20px auto;
    width: 100%;
}

/* Zoznamy */
ul {
    display: block;
    gap: 100px;
    justify-content: center;
    padding: 0;
    margin: 20px 0;
}

/* Štýl pre destinácie */
.destinacia {
    background-color: #f0f0f0;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Tieň okolo destinácie */
    font-family: 'Arial', sans-serif;
    color: #333;
}

/* Bannery */
#banner {
    background-color: #f3e2e2;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center; /* Stredové zarovnanie textu v bannery */
}