.body {
  background-color: rgb(210, 135, 30); /* farba pozadia stránky */
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; /* typ písma */
  font-size: large; /* veľkosť textu */
  font-weight: 400; /* hrúbka písma */
  line-height: 1.5; /* výška riadku */
  text-align: center; /* zarovnanie textu na stred */
  border: 2px solid #3b2a1a; /*okraj*/
  border-radius: 10px; /* kruhový tvar okraja*/
}

.header {
  display: flex; /* zapne flexbox */
  align-items: center; /* zarovná prvky vertikálne na stred */
  gap: 20px; /* medzera medzi prvkami */
  padding: 20px; /* vnútorný okraj */
  flex-direction: column; /* prvky pod sebou */
}

.header-top {
  display: flex; /* flexbox pre hornú časť hlavičky */
  align-items: center; /* vertikálne zarovnanie */
  gap: 50px; /* rozostup medzi prvkami */
}

.logo {
  width: 100px; /* šírka loga */
  height: auto; /* automatická výška */
  transition: transform .2s, box-shadow .2s; /* animácia pohybu a tieňa */
  border-radius: 50%; /* kruhový tvar */
}

.logo:hover {
  transform: translateY(-4px); /* posun hore pri hoveri */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /*tieň */
}

.main-title {
  margin: 0; /* vonkajší okraj */
  padding: 10px 18px; /* vnútorný okraj */
  line-height: 1.2; /* výška riadku */
  color: #3b2a1a; /* farba textu */
  background-color: #e4ad14c4; /* farba pozadia */
}

.nav {
  display: flex; /* flexbox navigácie */
  justify-content: center; /* vycentrovanie na stred */
  margin-top: 30px; /* horný okraj */
}

.ul-navig {
  list-style: none; /* odstráni odrážky */
  display: flex; /* flexbox pre menu */
  gap: 30px; /* medzera medzi položkami */
  padding: 0; /* vnútorný okraj */
  margin: 0; /* vonkajší okraj */
}

.ul-navig li {
  background-color: #e4ad14c4; /* pozadie položky */
  border-radius: 20px; /* zaoblené rohy */
  padding: 15px; /* vnútorný okraj */
  width: 160px; /* šírka položky */
  height: 100px; /* výška položky */
  display: flex; /* flexbox */
  flex-direction: column; /* prvky pod sebou */
  align-items: center; /* zarovnanie na stred */
  text-align: center; /* zarovnanie textu */
  transition: transform .2s, box-shadow .2s; /* animácia */
}

.ul-navig img {
  width: 60px; /* šírka obrázka */
  margin-bottom: 10px; /* spodná medzera */
}

.ul-navig span {
  font-size: 20px; /* veľkosť textu */
}

.ul-navig li a {
  display: flex; /* flexbox odkazu */
  flex-direction: column; /* obsah pod sebou */
  align-items: center; /* zarovnanie na stred */
  gap: 8px; /* medzera medzi prvkami */
  padding: 10px; /* vnútorný okraj */
  text-decoration: none; /* odstráni podčiarknutie */
  color: #3b2a1a; /* farba textu */
}

.ul-navig li:hover {
  transform: translateY(-4px); /* posun hore */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* tieň */
}

h1 {
  color: #3b2a1a; /* farba textu */
  background-color: hsla(44, 70%, 83%, 0.382); /* pozadie */
  text-align: center; /* zarovnanie textu */
  font-size: 45px; /* veľkosť nadpisu */
  border-radius: 10px; /* zaoblené rohy */
  margin: 10px auto; /* vonkajší okraj */
  padding: 12px 24px; /* vnútorný okraj */
  display: inline-block; /* veľkosť podľa obsahu */
  font-style: oblique; /* šikmé písmo */
}

h2 {
  color: #3b2a1a; /* farba textu */
  background-color: hsla(44, 70%, 83%, 0.382); /* pozadie */
  border-radius: 10px; /* zaoblenie */
  display: inline-block; /* veľkosť podľa obsahu */
  padding: 12px 24px; /* vnútorný okraj */
}
.img-text {
  display: flex; /* zapne flexbox pre sekciu (obrázok + text) */
  gap: 20px; /* medzera medzi obrázkom a textom */
  align-items: center; /* vertikálne zarovná obsah na stred */
  margin: 40px 0; /* odsadenie sekcie zhora a zdola */
  justify-content: center; /* horizontálne vycentruje celý obsah v sekcii */
}

.img-text.left {
  flex-direction: row; /* obrázok vľavo, text vpravo */
}

.img-text.right {
  flex-direction: row-reverse; /* obrázok vpravo, text vľavo */
}

.img-text img {
  max-width: 45%; /* maximálna šírka */
  height: auto; /* výška položky */
}

.img-rounded {
  border-radius: 12px; /* zaoblené rohy */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* animácia */
  margin: 1%; /* vonkajší okraj */
}

.img-rounded:hover {
  transform: scale(1.05); /* zväčšenie */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* tieň */
}

.text-boxl {
  max-width: 600px; /* maximálna šírka */
  padding: 16px 20px; /* vnútorný okraj */
  border-radius: 12px; /* zaoblenie */
  line-height: 1.7; /* výška riadku */
  border-left: 4px solid #3b2a1a; /* ľavý okraj */
}

.text-boxr {
  max-width: 600px; /* maximálna šírka */
  padding: 16px 20px; /* vnútorný okraj */
  border-radius: 12px; /* zaoblenie */
  line-height: 1.7; /* výška riadku */
  border-right: 4px solid #3b2a1a; /* pravý okraj */
}

.def {
  text-align: left; /* zarovnanie textu doľava */
  margin: 20px;
}

ol {
  text-align: left; /* zarovnanie zoznamu doľava */
}

.btn {
  display: inline-flex; /* flex tlačidlo */
  align-items: center; /* vertikálne zarovnanie */
  padding: 12px 20px; /* vnútorný okraj */
  margin: 6px 0; /* vonkajší okraj */
  background-color: #e4ad14c4; /* pozadie */
  color: #3b2a1a; /* farba textu */
  text-decoration: none; /* odstráni podčiarknutie */
  font-weight: 600; /* hrubšie písmo */
  font-size: 16px; /* veľkosť písma */
  border-radius: 10px; /* zaoblenie */
  cursor: pointer; /* kurzor ruky */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* animácia */
}
.btn:hover {
  transform: translateY(-4px); /* posun hore */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* tieň */
}
.my-table {
  border-collapse: collapse; /* spojí okraje buniek */
  margin: 20px auto; /* vycentruje tabuľku */

}
.my-table th,
.my-table td {
  border: 1px solid #333; /* orámovanie buniek */
  padding: 10px; /* vnútorný okraj */
  text-align: center; /* zarovnanie textu */
  }
.my-table th {
  background-color: #e4ad14c4; /* pozadie hlavičky */
}
.ul_aside{
  text-align: left; /*zarovnanie textu dolava*/
}
.img_w1{
  width: 300px;
  height: 450px;
}
.img_wt{
  width: 100px;
  height: 175px;
}
.img_w2{
  width: 550px;
  height: 400px;
}
.img_w3{
  width: 450px;
  height: 300px;
}
.img_w4{
  width: 400px;
  height: 550px;
}
.section-title {
  grid-column: 1 / -1; 
}