body {
  /* telo stranky */
  width: 90%;
  /* sirka celeho obsahu stranky bude 90 % sirky okna prehliadaca */
  background-color: #F5F5BF;
  /* svetla zltobezova farba pozadia celej stranky */
  font-family: "Times New Roman", Arial, Helvetica;
  /* typ pisma pre text na celej stranke */
  text-align: left;
  /* zarovnanie textu dolava */
  color: #555555;
  /* tmavosiva farba textu */
  font-size: 20px;
  /* nastavi velkost pisma na 20 px */
  margin: 20px auto;
  /* vycentrovany obsah zhora/zdola 20px, zlava/zprava automaticky */
  padding: 20px;
  /* odsadenie zvnutra je 20 px */
  border: 5px dotted #D5B5F5;
  /* bodkovany ram okolo tela stranky, hrubka 5px, svetla fialova farba s jemnym nadychom do levandulovej */
  line-height: 26px;
  /* rozostup medzi jednotlivymi riadkami je 26px */
}

.navbar {
  /* navigacny panel */
  width: 93%;
  /* navigacny panel zaberie 93 % sirky celej stranky */
  display: flex;
  /* flexibilny kontajner */
  align-items: center;
  /* vertikalne zarovnava vsetky polozky vo vnutri kontajnera do stredu */
  justify-content: center;
  /* horizontalne zarovnava polozky vo vnutri kontajnera do stredu */
  background-color: #D5B5F5;
  /* svetla fialova farba pozadia s jemnym nadychom do levandulovej */
  height: 70px;
  /* vyska navbar-u */
  padding: 10px 30px;
  /* odsadenie zvnutra: zhora/zdola 10px, zlava/sprava 30px */
  gap: 20px;
  /* medzera medzi jednotlivymi polozkami (flex detmi) 20px */
  margin: 0 auto;
  /* horizontalne vycentrovanie */
  border-radius: 12px;
  /* velkost zaoblenie rohov 12px */
}

.nav-link {
  /* upravuje styl odkazov v navigacnom menu */
  text-decoration: none;
  /* odstrani podciarknutie */
  padding: 8px 14px;
  /* vnutorny priestor, zhora/zdola 8px, zlava/sprava 14px. */
  border-radius: 8px;
  /* zaoblenie rohov na 8px */
  transition: background-color 0.3s, color 0.3s;
  /* zabezpeci plynulu animaciu zmeny farby pozadia alebo textu pri hover, trvanie 0,3 sekundy */
}

.nav-link:hover {
  /* pseudotrieda, ktora sa aktivuje, ked pouzivatel prechadza mysou nad prvkom */
  background-color: #9f66d9;
  /* pri hover sa zmeni farba pozadia odkazu na stredne sytu fialovu s jemnym nadychom do purpurovej */
}

.nav-link.active {
  /* selektor, ktory vybera odkaz, ktory ma obe triedy: nav-link a active */
  background-color: #9f66d9;
  /* nastavuje pozadie aktivneho odkazu na stredne sytu fialovu s jemnym nadychom do purpurovej */
  color: whitesmoke;
  /* nastavuje farbu textu na svetlosivobielu, aby bol text dobre citatelny na tmavsom pozadi */
}

#logo {
  /* nastavuje velkost loga */
  height: 40px;
  /* nastavi vysku obrazka na 40 px */
  width: auto;
  /* obrazok sa zmensi alebo zvacsi proporcionalne */
}

header {
  /* nastavuje hlavicku stranky */
  max-width: 80%;
  /* urcuje maximalnu sirku prvku */
  margin-inline: auto;
  /* automaticke marginy vycentruju blokovy prvok horizontalne */
  padding: 10px;
  /* nastavi vnutorne okraje */
  position: sticky;
  /* prvok sa pohybuje spolu so strankou, kym nedosiahne zvolenu poziciu (top, left…), potom sa prilepi a zostane viditelny pri scrollovani */
  top: 0;
  /* urcuje, ze hlavicka sa prilepi na horny okraj obrazovky */
  z-index: 1000;
  /* urcuje vrstvovost prvku, vyssie cislo znamena, ze hlavicka bude nad ostatnymi prvkami na stranke */
}

#kontakt {
  /* velmi specificky selektor, styly sa aplikuju iba na tento element */
  background-color: #D5B5F5;
  /* nastavuje farbu pozadia sekcie na svetlu fialovu s jemnym nadychom do levandulovej */
  border-radius: 15px;
  /* zaobluje rohy prvku */
  text-align: center;
  /* zarovnava vsetok text a inline obsah napr. obrazky a odkazy) na stred */
}

#zdroje {
  /* velmi specificky selektor, styly sa aplikuju iba na tento element */
  text-align: left;
  /* zarovnava vsetok text a inline obsah dolava */
}

h1 {
  /* nastavuje styl pre najdolezitejsi nadpis na stranke */
  margin: 50px;
  /* nastavuje odsadenie zvonku vo vsetkych smeroch (hore, doprava, dole, dolava) na 50px */
  padding-bottom: 15px;
  /* vnutorne odsadenie spodnej casti nadpisu od spodnej hrany elementu je 15px */
  text-align: center;
  /* horizontalne zarovnanie textu do stredu */
  font-size: 40px;
  /* velkost pisma je 40px */
  border-bottom: 5px solid #D5B5F5;
  /* prida spodnu ciaru s hrubkou 5px a svetlo fialovej farby s jemnym nadychom do levandulovej */
}

h2 {
  /* nastavuje styl pre druhy typ nadpisu na stranke */
  margin: 40px;
  /* odsadenie zvonku vo vsetkych smeroch (hore, doprava, dole, dolava) je 40px */
  padding: 10px;
  /* vnutorne odsadenie vo vsetkych smeroch je 10p */
  font-size: 32px;
  /* velkost pisma je 32px */
}

h3 {
  /* nastavuje styl pre nadpis tretej urovne */
  margin: 30px;
  /* odsadenie zvonku je 30px */
  padding: 10px;
  /* odsadenie zvnutra je 10px */
  font-size: 24px;
  /* velkost pisma je 24px */
}

img {
  /* nastavuje styl pre vsetky obrazky na stranke */
  border-radius: 10px;
  /* zaobluje rohy obrazka o 10px, takze posobi vizualne maksie */
  display: block;
  /* obrazok sa sprava ako blokovy prvok namiesto predvoleneho inline */
  margin: 20px auto;
  /* horny a dolny margin 20px, lavy a pravy margin automaticky vycentruje obrazok horizontalne */
}

a {
  /* zakladny styl odkazov – farba textu a odstranenie podciarknutia */
  color: #555555;
  /* nastavuje farbu textu odkazu na tmavosivu */
  text-decoration: none;
  /* odstrani predvolene podciarknutie odkazov, aby vyzerali cistejsie */
}

a:hover {
  /* pseudotrieda sa aktivuje, ked pouzivatel prechadza mysou nad odkazom */
  color: whitesmoke;
  /* farba textu odkazu bude svetlosivobiela */
}

main {
  /* nastavuje spolocny styl pre hlavny obsah, hlavicku a paticku stranky */
  max-width: 80%;
  /* urcuje maximalnu sirku prvku */
  margin-inline: auto;
  /* automaticke marginy vycentruju blokovy prvok horizontalne */
  padding: 10px;
  /* nastavi vnutorne okraje */
}

footer {
  /* nastavuje styl pre paticku stranky */
  background-color: #D5B5F5;
  /* nastavuje farbu pozadia paticky na svetlu fialovu s jemnym nadychom do levandulovej */
  border-radius: 15px;
  /* zaobluje rohy paticky o 15px, vytvara maksi, vizualne prijemny vzhlad */
  text-align: center;
  /* zarovnava text a inline obsah do stredu paticky */
  max-width: 80%;
  /* urcuje maximalnu sirku prvku */
  margin-inline: auto;
  /* automaticke marginy vycentruju blokovy prvok horizontalne */
  padding: 10px;
  /* nastavi vnutorne okraje */
}

.obtekanie-vpravo {
  /* plavajuci prvok (napr. obrazok) s textom obtekajucim okolo */
  float: left;
  /* prvok sa posunie na lavu stranu, text obteka z pravej strany */
  margin: 10px;
  /* vonkajsi okraj (odsadenie od okolitych prvkov) 10px */
  padding: 10px;
  /* vnutorny okraj (priestor medzi obsahom a okrajom prvku) 10px */
  border-radius: 20px;
  /* zaoblenie rohov prvku o 20px */
}

.obtekanie-vlavo {
  /* plavajuci prvok (napr. obrazok) s textom obtekajucim okolo */
  float: right;
  /* prvok sa posunie na pravu stranu, text obteka z lavej strany */
  margin: 10px;
  /* vonkajsi okraj (odsadenie od okolitych prvkov) 10px */
  padding: 10px;
  /* vnutorny okraj (priestor medzi obsahom a okrajom prvku) 10px */
  border-radius: 20px;
  /* zaoblenie rohov prvku o 20px */
}

.table {
  /* nastavuje horizontalne zarovnanie tabulky na stred stranky */
  margin: 0 auto;
  /* 0 px horny a dolny margin, lavy a pravy margin automaticky vycentruje tabulku */
}

.foto {
  /* nastavuje styl pre vsetky elementy s triedou foto */
  border-radius: 10px;
  /* zaobluje rohy prvku o 10px */
  transition: transform 0.3s, border-radius 0.3s;
  /* zabezpeci plynulu animaciu pri zmene transformacie alebo rohov, trvanie 0,3 s */
  cursor: pointer;
  /* kurzor sa zmeni na ruku, co naznacuje, ze prvok je klikatelny */
}

.foto:hover {
  /* pseudotrieda, aplikuje sa, ked pouzivatel prejde mysou nad obrazkom */
  transform: scale(1.2);
  /* zvacsi obrazok o 20 % oproti povodnej velkosti pri prejdeni mysou */
  border-radius: 20px;
  /* este vacsie zaoblenie pri hoveri */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
  /* prida tien */
}

.tabulka {
  /* nastavenie tabulky na hlavnej stranke */
  width: 60%;
  /* sirka tabulky */
  margin: 20px auto;
  /* 20px hore a dole, horizontalne vycentrovane */
  border-collapse: separate;
  /* oddelene okraje, aby border-radius fungoval */
  border-spacing: 0;
  /* odstrani medzery medzi bunkami */
  background-color: #D5B5F5;
  /* nastavuje farbu pozadia sekcie na svetlu fialovu s jemnym nadychom do levandulovej */
  border: 1px solid #555555;
  /* okraj tabulky */
  border-radius: 15px;
  /* zaoblenie rohov */
  overflow: hidden;
  /* obsah nepresahuje zaoblenie */
}

.tabulka th,
.tabulka td {
  /* hlavickove aj bezne bunky */
  border: 1px solid #555555;
  /* viditelny ram buniek */
  text-align: center;
  /* obsah zarovnany do stredu bunky */
  padding: 5px;
  /* vnutorne odsadenie obsahu bunky */
}

.tabulka-obrazok {
  width: 160px;
  /* nastavuje sirku elementu na presne 160 px */
}

.obrazkova-mapa {
  width: 60%;
  /* sirka obrazku */
  height: auto;
  /* automaticky prisposobi­ vysku podla sirky */
  display: block;
  /* nastavi obrazok ako blokovy prvok */
  margin: 0 auto 20px auto;
  /* hore:0, vpravo:auto, dole:20px, vlavo:auto */
  border-radius: 5px;
  /* zaobli rohy obrazku */

}

.audio-video {
  padding: 40px 20px;
  /* vnutorne odsadenie: hore/dole 40px, vlavo/vpravo 20px */
  max-width: 800px;
  /* obmedzi maximalnu si­rku sekcie */
  margin: 0 auto 20px auto;
  /* hore:0, horizontalne: auto, dole:20px */
  background-color: #555555;
  /* nastavi­ tmavosive pozadie */
  border-radius: 8px;
  /* zaoblene­ rohy */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  /* prida jemny tien */
  text-align: center;
  /* obsah zarovnany do stredu */
  display: block;
  /* robi z prvku blokovy prvok */
}

#video-nadpis {
  /* upravuje nadpis nad videom */
  text-align: center;
  /* obsah zarovnany do stredu */
}

#audio-nadpis {
  /* upravuje nadpis nad audiom */
  text-align: center;
  /* obsah zarovnany do stredu */
}

.width-1 {
  /* sirka obrazka */
  width: 220px;
  /* upravi sirku obrazka na 220px */
}

.width-2 {
  /* sirka obrazka */
  width: 260px;
  /* upravi sirku obrazka na 260px */
}

.width-3 {
  /* sirka obrazka */
  width: 300px;
  /* upravi sirku obrazka na 300px */
}

.width-4 {
  /* sirka obrazka */
  width: 500px;
  /* upravi sirku obrazka na 500px */
}

.width-5 {
  /* sirka obrazka */
  width: 640px;
  /* upravi sirku obrazka na 640px */
}

.height-1 {
  /* vyska obrazka */
  height: 400px;
  /* upravi vysku obrazka na 400px */
}