img:hover {
    transform: scale(1.1); /* Zvacsi obrazok o 10 % pri prechode mysou. */
    transition: transform 0.3s ease; /* Hladky prechod pocas 0.3 sekundy. */
    border-radius: 10px; /* Prida jemne zaoblenie rohov obrazka. */
}
nav {
    padding: 0px; /* Odstranenie vnutornych okrajov navigacie. */
    background-color: #8a8a8a; /* Nastavenie tmaveho pozadia. */
}

nav ul {
    list-style: none; /* Odstranenie odrazok zo zoznamu. */
    padding: 0; /* Odstranenie vnutornych okrajov zoznamu. */
    display: flex; /* Umiestnenie poloziek zoznamu do jedneho riadku. */
    justify-content: space-around; /* Rovnomerne rozlozenie poloziek so strbinami medzi nimi. */
    align-items: center; /* Zvisle zarovnanie poloziek v ramci navigacie. */
}
nav ul li a {
    color: white; /* Nastavenie bielej farby textu pre lepsi kontrast. */
    text-decoration: none; /* Odstranenie podciarknutia z odkazov. */
    font-size: larger; /* Vacsia velkost textu pre lepsiu citatelnost. */
    justify-content: space-between; /* Rozlozenie medzi textom a inymi prvkami (nepouzite). */
    padding: 10px 20px; /* Vnutorne okraje na zvacsenie klikacej oblasti. */
    display: block; /* Umoznuje lepsiu manipulaciu s klikacou oblastou. */
}

nav ul li a:hover {
    background-color: #575757; /* Tmavsie pozadie na zvraznenie pri hover. */
    border-radius: 5px; /* Jemne zaoblenie pri zvrazneni. */
}
#zaciatok {
    font-size: 40px; /* Zvraznenie velkosti textu. */
    color: red; /* Nastavenie cervenej farby textu. */
    font-family: 'Courier New', Courier, monospace; /* Pismo pre efekt kodu alebo strojopisu. */
}
footer a {
    display: inline-block; /* Odkaz sa sprava ako blokovy element. */
    background-color: #333; /* Tmave pozadie odkazu. */
    font-size: larger; /* Zvraznenie textu. */
    text-decoration: none; /* Odstranenie podciarknutia. */
    color: white; /* Biela farba textu. */
    padding: 5px 30px; /* Pridanie vnutornych okrajov. */
    border-radius: 5px; /* Zaoblenie rohov. */
    text-align: center; /* Zarovnanie textu na stred. */
    transition: background-color 0.3s ease; /* Hladky prechod pri zmene farby pozadia. */
}

footer a:hover {
    background-color: #575757; /* Zvraznenie tmavsou farbou pozadia. */
}
mark {
    background-color: rgb(255, 91, 91); /* Svetlo cervene pozadie. */
    font-size: 20px; /* Vacsi text. */
    font-family: 'Times New Roman', Times, serif; /* Elegantne serifove pismo. */
    font-style: italic; /* Kurziva. */
    font-weight: 800; /* Zvraznenie tucnym pismom. */  
}
.filmy dt img{
    height: 150px; /* Nastavenie vysky obrazkov. */
    margin: 5px; /* Odstup medzi obrazkom a ostatnymi prvkami. */
    float: left; /* Obrazok je zarovnany nalavo a ostatny text ho obteka. */
    position: absolute; /* Umiestnenie vzhladom na rodica. */
    left: 300px; /* Umiestnenie dolava o 300px. */
    transform: translate(-50%, -45%); /* Posun na stred. */
}
.filmy dt {
    font-size: 25px; /* Vacsi text pre nazvy filmov. */
    border: 2px solid black; /* Oramovanie. */
    padding: 70px; /* Vnutorny odstup pre lepsi dizajn. */
}
.filmy dd {
    font-size: 25px; /* Text definicii. */
    border: 2px solid black; /* Oramovanie. */
    padding: 10px; /* Vnutorne okraje. */
    margin: 5px; /* Vonkajsie okraje. */
}
.filmy{
    width: 30%; /* Sirka zoznamu je 30 % rodicovskeho elementu. */
    min-width: 410px; /* Minimalna sirka zoznamu. */
}
table{
    border: 1px solid black; /* Oramovanie tabulky. */
    border-collapse: collapse; /* Spojenie hran buniek tabulky. */
}