body {
    margin: 0; /* Odsadenie okrajov */
    padding: 0; /* Odsadenie okrajov */
}


/* Tablety a mensie obrazovky */
@media (max-width: 768px) {
    .top-nav {
        flex-direction: column;  /* Polozky sú zoradene vertikelne */
    }
    
    .top-list li {
        margin-left: 0;  /* Odsadenie okrajov */
        text-align: center;  /* Zarovnanie textu */
    }
    
    .logo-image {
        width: 80px;  /* Sirka pre nastavenie obrazku */
    }
}

/* Mobily */
@media (max-width: 480px) {
    .top-nav {
        padding: 5px;  /* Vnutorne odsadenie */
    }
    
    .top-list li {
        font-size: 14px; /* Zmena velkosti pisma */
    }
}

.top-nav {
    display: flex;   /* Pouziva Flexbox pre rozlozenie prvkov. */
    flex-direction: row;  /* Polozky su zoradene horizontalne. */
    flex-grow: 1;  /* Zaistuje, ze zoznam vyplni dostupny priestor. */
    align-items: center;  /* Zarovnanie textu */
    background-color: darkgreen;  /* Farba pozadia */
    padding: 10px;  /* Vnutorne odsadenie */
    position: fixed; /* Navigacny panel zostava na vrchu aj pri skrolovani.  */
    width: 100%;  /* Sirka navigacneho panelu */
    z-index: 1000;  /*  Zabezpecuje, ze panel je nad ostatnymi elementmi.  */
   
    
}

.top-list {
    list-style-type: none;  /* Odstranuje odrážky zo zoznamu. */
    margin: 0; 
    padding: 0; 
    display: flex;  /* Polozky v zozname su zoradene vedla seba horizontalne. */
    flex-grow: 1; /*  Zaistuje, ze zoznam vyplni dostupny priestor. */
    
}

.top-list li {
    margin: 0 15px; /* Kazda polozka ma horizontalne odsadenie 15px. */
    font-size: 25px; /* Zvyraznuje velkost pisma. */ 
    display: inline;  
   
}

.top-list a {
    color: white;   /* Farba textu */
    text-decoration: none;  /* Odstranenie podtaze */
    padding: 10px;  /* Vnutorne odsadenie */
    
}

.top-list a:hover {
    background-color: lightgreen;  /* Meni sa na svetlozelenu pri prechode mysou */
}

.top-section {
    background-color: blue;  /* Farba pozadia */
}


.header {
    position: relative;  /* Umozni relativne pozicie */
}

.header-image {
    width: 100%;  /* Obrazok zabera celu sirku */
    height: auto;  /* Vyska */
}

.logo {
    position: absolute; 
    top: 10px;
    left: 10px;  /* Umiestnuje logo do laveho horneho rohu. */
    z-index: 10;  
}

.logo-image { 
    width: 50px;  /* Sirka pre nastavenie obrazku */
    height: auto;  /* Vyska */
}

.video {
    max-width: 400px;  /* Obmedzuje maximalnu sirku videa. */ 
    height: auto;  /* Vyska */
     
}

.surany-header {
    width: 100%;  /* Sirka */

}

body { 
    width: 100%;  /* Sirka */
}

p {        /*Text sa zalamuje, aby nepresahoval kontajner. */
    overflow-wrap: break-word;   
    width: 100%;  /* Sirka textu */
    font-family: Arial, Helvetica, sans-serif;  /* Font */
}

nav {
    padding: 10px;  /* Vnutorne odsadenie pre lepsie citanie. */
    background-color: darkgreen;  /* Farba pozadia */
    
}

body {           /* Odstranuje predvolene okraje a odsadenia. */ 
    padding: 0;
    margin: 0; 
}

.full-section { 
    padding: 20px;  /* Vnutorne odsadenie */
}

ul {
    list-style-type: none;  /* Odstranuje odrazky. */
    margin: 0;          /* Odstranenie predvolenych okrajov */
    padding: 0;         /* Odstranenie vnutorneho odsadenia */
    overflow: hidden;   /* Zabranuje preteceniu zoznamu mimo kontajner. */
   
}


blockquote {
    
    color: royalblue;  /* Farba textu */
    margin: 1em 1em;   /* Odsadenie okrajov */
    padding: 0.5em 1em;  /* Vnutorne odsadenie */
}   

li a {
    
    color: rgb(0, 0, 0);  /* Farba textu */
    text-align: center;   /* Zarovnanie textu */
    padding: 10px 20px;   /* Vnutorne odsadenie */
    text-decoration: none;  /* Odstranenie podtaze */
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;  /* Font */
    height: 100%;  /* Vyska */
    
}
li a:hover:not(.active) {
    background-color: lightgreen;  /* Farba pozadia */
}
nav {
    background-color: darkgreen;  /* Farba pozadia */
    padding: 0;                    /* Odsadenie okrajov */
}

.menu {
    list-style-type: none;  /* Odstranuje odrazky zo zoznamu. */
    margin: 0;               /* Odstranenie predvolenych okrajov */
    padding: 0;                /* Odstranenie vnutorneho odsadenia */
    display: flex;               /* Polozky su zoradene horizontalne */
}

.menu li {
    flex: 1;                     
}

.menu a {
    display: block;            /* Kazdy list item sa chova ako block*/
    color: rgb(0, 0, 0);       /* Farba  */
    text-align: center;         /* Zarovnanie textu */
    padding: 10px 20px;        /* Vnutorne odsadenie */
    text-decoration: none;       /* Odstranenie podtaze */
}

.menu li:hover {
    background-color: lightgreen; /* Hoveruje nad aktivnym menu*/
}

.active {
    background-color: lightgreen;  /* Farba aktivneho menu */
}

table {
    width: 100%; /* Sirka tabulky */
    border-collapse: collapse; /* Zlucit okraje */
}

th, td {
    border: 1px solid black; /* Okraj pre bunky */
    padding: 8px; /* Vnutorne odsadenie */
    text-align: left; /* Zarovnanie textu */
}

th {
    background-color: #f2f2f2; /* Farba pozadia hlavicky */
}

.casti-mesta {
    list-style-type: none; /* Odstranenie predvolenych bodiek */
    padding: 0; /* Odstranenie vnutorneho odsadenia */
    margin: 0; /* Odstranenie predvolenych okrajov */
}

.casti-mesta li {
    background-color: #ffffff; /* Farba pozadia pre polozky */
    margin: 0px 0; /* Odsadenie medzi polozkami */
    padding: 5px; /* Vnutorne odsadenie */
    border-left: 0px solid #3498db; /* Lavy okraj pre vizualny efekt */
    transition: background-color 0.3s; /* Hladky prechod farby pozadia */
    display: block; /* Kazdy list item sa chova ako block*/
}


.casti-mesta li {
    display: flex; /* Umozni horizontalne usporiadanie obrazkov a textu */
    align-items: center; /* Vertikalne zarovnanie obsahu */
    background-color: #e7f3fe; /* Farba pozadia pre polozky */
    margin: 10px 0; /* Odsadenie medzi polozkami */
    padding: 10px; /* Vnutorne odsadenie */
    border-left: 5px solid #3498db; /* Lavy okraj pre vizualny efekt */
    transition: background-color 0.3s; /* Hladky prechod farby pozadia */
}

.casti-mesta img {
    margin-right: 10px; /* Odsadenie medzi obrazkom a textom */
    width: 150px; /* Nastavenie sirky obrazka */
    height: auto; /* Zachovanie pomeru stran */
}



.selfie {
    margin-top: 20px; /* Medzera nad obrazkom */
    text-align: left; /* Vycentrovanie textu */
}

.selfie img {
    width: 150px; /* Velkost obrazku */
    height: auto;  /* Vyska */
    border-radius: 8px; /* Kornery obrazku */
    
}

.kostol {
    width: 100px; /* Nastavenie sirky obrazku  */
    height: auto; /* Vyska */
}

.footer-section {
    text-align: center; /* Zarovnanie textu */
}


table {
    border-collapse: collapse; /* Zlucit okraje */
    width: 100%; /* Sirka tabuľky */
  }

  th, td {
    border: 1px solid #ddd; /* Okraj pre bunky */
    padding: 10px; /* Vnutorne odsadenie */
    text-align: left; /* Zarovnanie textu */
  }

 td img {
    width: 100px; /* Velkost obrazka */
    transition: transform 0.3s ease; /* Smooth efekt */
  }
 

  a {
    text-decoration: none; /* Da prec underliny */
  }

  a:hover img {
    border: 2px solid #007bff; /* Border na img hoveri */
  }


  footer {
    position: fixed;               /* Fixnuty footer na konci stranky */
    right: 20px;                   /* 20px zprava */
    bottom: 10px;                  /* 10px odspodu */
    background-color: #333;        /* farba pozadia */
    color: #fff;                   /* biely text */
    padding: 15px 25px;            /* padding okolo textu */
    text-align: center;            /* Vycentruje text v bubline */
    border-radius: 25px;           /* Rounded corners pre efekt bubliny */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Tien */
    display: inline-block;         /* Meni velkost podla contentu */
    font-size: 16px;               /* Font size  */
  }

  footer::after {
    content: "";                   /* Vytvorenie pseudo-elementu pre sipku */
    position: absolute;            /* Pozicia footeru */
    bottom: -15px;                 /* Vysoka pozicia footeru */
    right: 20px;                   /* Zarovnanie s pravou stranou footeru */
    width: 0;                      /* Sirka footeru */
    height: 0;                     /* Vyska footera */
    border-left: 10px solid transparent;  /* Lava strana footeru */
    border-right: 10px solid transparent; /* Prava strana footeru */
    border-top: 15px solid #333;         /* Farba footeru  */
  }

  .back-to-top {
    color: #fff;                   /* Biely text pre šípku */
    text-decoration: none;         /* Odstranenie podtaze */
    font-size: 16px;                /* Font size pre sipku */
    display: inline-block;          /* Umozni stylovanie */
    margin-bottom: 10px;           /* Medzera pod sipkou */
  }

  .back-to-top:hover {
    text-decoration: underline;    /* Podtaz na hover */
  }


  .casti-mesta {
    list-style-type: none; /* Odstranenie predvolenych bodiek */
    padding: 0; /* Odstranenie vnutorného odsadenia */
  }

  .casti-mesta li {
    display: inline-block; /* Umozni horizontalne usporiadanie obrazkov a textu */
    margin: 10px; /* Odsadenie medzi polozkami */
    text-align: center; /* Zarovnanie textu */
  }

  
  .casti-mesta img {
    width: 100px; /* Nastavenie sirky obrazku */
    height: 100px; /* Nastavenie vysky */
    transition: transform 0.3s ease; /* Smooth tranzicia pre zväčšenie obrázku */
  }

 
  .casti-mesta img:hover {
    transform: scale(1.2); /* Zvacsi obrazok ked je hover */
  }

  
  .nav {
    width: 64px; /* Šírka pre nastavenie obrázku */
    height: auto; /* Vyska pre nastavenie obrazku */

  }
 

  .jedlo {
    

    display: flex; /* Umozni horizontalne usporiadanie */
    flex-direction: column; /* Polozky su zoradene horizontalne */
    font-family: Arial, Helvetica, sans-serif; /* Font */
  }


  .map {
    
    width:600px; /* Sirka mapy */
    height:450px; /* Vyska mapy */
    border:0; /* Vynecha hranice */
    
  }

  .title {
    text-align: center;  /* Zarovnanie textu */
}