body {
    background-color: rgb(255, 228, 228); /* Nastavi farbu pozadia na svetloruzovu */
}

nav {
    background-color: rgb(238, 188, 188); /* Nastavi farbu pozadia navigacie */
    padding: 15px 30px; /* Vytvori vnutorne okraje navigacie (hore/dole: 15px, vlavo/vpravo: 30px) */
    display: flex; /* Nastavi flexbox pre navigaciu */
    align-items: center; /* Zrovna prvky v navigacii vertikalne na stred */
    justify-content: space-between; /* Rozlozi prvky v navigacii rovnomerne medzi zaciatkom a koncom */
    border-radius: 8px; /* Zaobli rohy navigacie */
}

#nav-logo img {
    border-radius: 5px; /* Zaobli rohy obrazka loga */
    transition: transform 0.3s ease; /* Prida plynuly prechod na transformaciu */
    float: left; /* Umiestni logo nalavo */
}

#nav-logo img:hover {
    transform: scale(1.1); /* Zvacsi logo pri hover efekte */
}

#nav-links {
    display: flex; /* Nastavi flexbox pre zoznam odkazov */
    list-style: none; /* Odstrani odrazky zoznamu */
    padding: 0; /* Nastavi nulove vnutorne okraje */
    margin: 0; /* Nastavi nulove vonkajsie okraje */
    gap: 20px; /* Prida medzery medzi odkazmi */
    justify-content: center; /* Zrovna odkazy na stred v horizontalnej osi */
    flex-grow: 1; /* Rozlozi dostupny priestor medzi odkazy */
}

#nav-links li {
    display: inline; /* Umiestni prvky zoznamu do jedneho riadku */
}

#nav-links a {
    text-decoration: none; /* Odstrani podciarknutie z odkazov */
    color: black; /* Nastavi farbu textu odkazov na ciernu */
    padding: 10px 15px; /* Prida vnutorne okraje do odkazov */
    font-weight: bold; /* Nastavi text na tucny */
    border-radius: 5px; /* Zaobli rohy odkazov */
    transition: background-color 0.3s ease, color 0.3s ease; /* Prida plynuly prechod na zmenu farieb */
}

#nav-links a:hover {
    color: white; /* Zmeni farbu textu na bielu pri hover efekte */
    background-color: rgb(134, 5, 102); /* Nastavi farbu pozadia na fialovu pri hover efekte */
}

h1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif; /* Nastavi font pre hlavny nadpis */
}

.footer-box {
    text-decoration: underline; /* Podciarkne text vo footeri */
    padding: 20px; /* Nastavi vnutorne okraje vo footeri */
    background-color: rgb(238, 188, 188); /* Nastavi farbu pozadia footera */
    justify-content: center; /* Zarovna obsah footera horizontalne na stred */
    align-items: center; /* Zarovna obsah footera vertikalne na stred */
    text-align: center; /* Zarovna text footera na stred */
}

.image {
    border: 3px solid red; /* Nastavi cerveny ramcek okolo obrazkov s triedou image */
    transition-duration: 0.3s; /* Prida plynuly prechod na zmenu */
}

.image:hover {
    width: 820px; /* Nastavi sirku obrazka pri hover efekte */
    height: 520px; /* Nastavi vysku obrazka pri hover efekte */
    border-radius: 5px; /* Zaobli rohy obrazka pri hover efekte */
    border-color: darkgreen; /* Zmeni farbu ramceka na tmavozelenu pri hover efekte */
    border-style: ridge; /* Zmeni styl ramceka na "ridge" pri hover efekte */
    transition-duration: 0.3s; /* Prida plynuly prechod pri hover efekte */
}

#markblue {
    background-color: blue; /* Nastavi modre pozadie pre element s ID markblue */
}

.red {
    color: red; /* Nastavi cervenu farbu textu pre triedu red */
}

.orange {
    color: orange; /* Nastavi oranzovu farbu textu pre triedu orange */
}

.in-middle-section {
    justify-content: center; /* Zarovna obsah horizontalne na stred */
    align-items: center; /* Zarovna obsah vertikalne na stred */
    text-align: center; /* Zarovna text na stred */
    color: blueviolet; /* Nastavi farbu textu na modrofialovu */
}

.img-section, .center {
    justify-content: center; /* Zarovna obsah horizontalne na stred */
    align-items: center; /* Zarovna obsah vertikalne na stred */
    text-align: center; /* Zarovna text na stred */
}

.media-box {
    display: flex; /* Nastavi flexbox pre triedu media-box */
    flex-direction: column; /* Nastavi vertikalne rozlozenie prvkov */
    justify-content: center; /* Zarovna obsah horizontalne na stred */
    align-items: center; /* Zarovna obsah vertikalne na stred */
    text-align: center; /* Zarovna text na stred */
    gap: 20px; /* Prida medzery medzi prvkami */
}

.berlin-table {
    width: 100%; /* Nastavi sirku tabulky na 100% rodicovskeho elementu */
    border-collapse: collapse; /* Zluci ramceky tabulky */
    text-align: left; /* Zarovna text v tabulke dolava */
    margin: 20px 0; /* Prida vonkajsie okraje hore a dole */
}

.berlin-table th, .berlin-table td {
    border: 1px solid black; /* Nastavi cierne ramceky pre bunky tabulky */
    padding: 8px; /* Prida vnutorne okraje do buniek tabulky */
}

.berlin-table th {
    font-weight: bold; /* Nastavi tucny text pre hlavicku tabulky */
    text-align: center; /* Zarovna text v hlavicke tabulky na stred */
}

main, article, section, aside {
    border: 2px solid #ccc; /* Nastavi svetlosivy ramcek pre tieto elementy */
    border-radius: 8px; /* Zaobli rohy tychto elementov */
    background: rgba(255, 255, 255, 0.8); /* Nastavi polopriesvitne biele pozadie */
    margin: 30px auto; /* Zarovna na stred a prida vonkajsie okraje hore a dole */
    padding: 20px; /* Prida vnutorne okraje */
    max-width: 900px; /* Obmedzi maximalnu sirku na 900px */
    box-sizing: border-box; /* Zahrna padding a border do celkovej sirky a vysky */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Prida jemny tien okolo */
}

#img-map {
    display: block; /* Nastavi blokovy typ pre obrazok */
    margin: 0 auto; /* Zarovna obrazok na stred */
}

.kotva {
    text-align: center; /* Zarovna text na stred */
    display: block; /* Nastavi blokovy typ pre element */
}