/* resetovanie predvoleneho okraja tela */
body {
  margin: 0;
  /*ziadny vonkajsi okraj*/
}

/* Audio element – blokový element s plnou šírkou a zaoblenými rohmi */
audio {
  display: block;
  /* zabezpeci, ze audio prehravac bude na samostatnom riadku */
  margin-top: 10px;
  /*prida 10px medzeru nad prvkom*/
  width: 100%;
  /* nastavi sirku prvku na 100% dostupneho miesta*/
  border-radius: 5px;
  /* zaoblene rohy */
}

/* plynule posuvanie pre vnutorne odkazy a nastavenie pozadia + fontu */
html {
  scroll-behavior: smooth;
  /* hladke posuvanie */
  font-family: 'Roboto', sans-serif;
  /* typ pisma: Roboto */
  background-image: url(../images/background.jpg);
  /* obrazok na pozadi */
}

h1 {
  text-align: center;
  /* centrovanie textu */
}

li {
  margin-top: 10px;
}

table {
  width: 90%;
  margin: 20px auto;
  border-collapse: collapse;
  /* spojit okraje buniek do jedneho */
  text-align: center;
}

th,
td {
  border: 1px solid #000;
  /* okraj paddingu */
  padding: 10px;
  /* vnútorný odsadenie */
}

/* Footer – zarovnanie textu, okraje a pozadie */
footer {
  text-align: center;
  margin-top: 50px;
  padding: 20px 0;
  border-top: 1px solid #000;
  /* vrchny okraj paddingu */

  background-image: url(../images/background.jpg);
  z-index: 1;
  /* footer bude nad videom */
}

footer p {
  margin: 5px 0;
}

footer nav {
  margin-top: 10px;
}

a {
  color: inherit;
  /* zdedena farba textu */
  text-decoration: underline;
  /* podciarknutie textu */
}

a:hover {
  background-color: rgba(30, 30, 30, 0.40);
  /* farba uzadia */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  /* tieň okolo prvku */
  border-radius: 10px;
}

mark {
  background-color: rgba(30, 30, 30, 0.60);
  color: #f5e8dc;
}

/* Upravuje rozlozenie obsahu vo footeri */
footer .footer-container {
  display: flex;
  /* flexibilne zobrazenie prvku */
  flex-wrap: wrap;
  /* elementy sa zalomia do dalsieho riadku, ak sa nezmestia */
  justify-content: space-between;
  /* medzery medzi prvkami vyplnia dostupne miesto */
  align-items: center;
  /* zarovnanie poloziek na stred */
  gap: 20px;
  /* medzera medzi polozkami */
  max-width: 1000px;
  margin: 0 auto;
}

/* Styly pre logo, jeho rozmery a animacie pri hover */
#logo {
  width: 180px;
  height: auto;
  display: block;
  margin: 0 20px 0 0;
  transition: transform 0.3s ease, filter 0.3s ease;
  /* plynula animacia pri zmene transformacie alebo filtra */
  image-rendering: auto;
  /* automaticke vykreslenie obrazka */
}

#section1 {
  margin-top: 40px;
  margin-bottom: 10px;
  /*prida 10px medzeru pod prvkom*/
  padding: 20px;
}

/* velke pozadie video – pokryje celu obrazovku a zostane za obsahom */
#big-video {
  position: fixed;
  /* video zostava vzdy na obrazovke pri scrollovani */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  /* video je za ostatnzmy obsahom stranky */
  filter: brightness(0.6);
  /* stmavi video pre lepsiu citatelnost textu nad nim */
}

/* Lavy a pravy blok vo footeri – flexibilne rozlozenie */
.footer-left,
.footer-right {
  flex: 1 1 300px;
}

/* Styly pre hlavne obrazky sekcii – rozmery, tvar a plynule efekty */
.square-img {
  width: 400px;
  height: 400px;
  object-fit: cover;
  /* obrazok vyplni prvok bez deformacie */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  /* jemny tien okolo obrazku */
  border-radius: 10px;
  transition: all .3s ease-in-out;
  /* animacia pri zmene vlastnosti */
}

.square-img:hover {
  transform: scale(1.05);
  /* obrazok sa zvacsi pri hover */
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

/* Hlavny navigacny panel – zarovnanie odkazov a rozlozenie */
.navbar {
  position: relative;
  /* umiestnovanie deti podla tohto kontajnera */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 10px;
  padding-inline: 20px;
  /* vnutorne odsadenie zlava aj sprava 20px */
}

.navbar a {
  text-decoration: none;
  /* odstrani dekoraciu textu */
  color: rgba(30, 30, 30);
  padding: 20px;
}

/* Vizualna reprezentacia v navbar – pouzivatel vidi, na ktorej stranke sa nachadza */
.navbar a.active {
  background-color: rgba(30, 30, 30, 0.40);
  color: rgba(30, 30, 30);
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(245, 232, 220, 0.6);
}

.navbar a:hover {
  background-color: rgba(30, 30, 30, 0.60);
  color: #f5e8dc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

/* Hlavicka stranky – obsahuje logo a menu, styling a pozadie */
.header-section {
  padding: 20px 0 10px 0;
  border-bottom: 3px solid rgba(30, 30, 30, 0.60);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  display: flex;
  align-items: flex-start;
  gap: 10px;

  background-image: url(../images/background.jpg);
  z-index: 1;
  /* umiestni hlavicku nad videom*/
}

/* Styly pre jednotlive obsahove sekcie – obal pre text a obrazky s pozadim a tienom */
.section {
  display: flex;
  margin: 3% auto;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1200px;
  background-color: rgba(30, 30, 30, 0.80);
  /* polopriesvitne tmave pozadie */
  padding: 20px;
  /* vnutorny okraj */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  /* tien okolo sekcie */
  color: #f5e8dc;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  /* tien textu pre lepsiu citatelnost */
}

.section figure {
  flex: 1 1 400px;
  margin: 0;
}

.section p {
  flex: 1 1 400px;
}

.images {
  justify-content: center;
}

/* Maly obrazok – ikony pouziti v description liste */
.small-img {
  width: 40px;
  margin-right: 10px;
  vertical-align: middle;
  /* zarovna obrazok na stred zvisle */
}

/* Float obrazok – obrazok plava vlavo a okolo neho text obtaca */
.float-img {
  float: left;
  margin: 0 20px 20px 0;
  width: 250px;
}

/* Obrazok vo float kontejnere – rozmery a zaoblene rohy */
.float-img img {
  width: 100%;
  height: 400px;
  border-radius: 10px;
}

.image-map {
  display: block;
  max-width: 100%;
  height: auto;
  cursor: pointer;
}