/*nevedel som co znamena okomentovane ale predpokladam ze ste nemysleli kazdy riadok tak som sa z casovej tiesne snazil aspon okomentovat to podstatne*/

/* tu upravujem html selektor body */
body {                              
  display: flex; /* tu nastavujem cely kontajner na flexibilny*/
  flex-direction: column;
   margin: 200px; /* okraj davam na 200 z kazdej strany nech to vyzera pekne*/
   margin-top: 0px;
   margin-bottom: 20px;
   padding: 0;
   background-color: beige; /*pozadie*/
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);/* na akoze 3d efekt*/
   
}


.hlavnyObrazok {/* tu som vyuzil uz triedy a tu konkretne nastavujem zaoblene rohy aby som vam ukazal ze to viem nastavit, a ten margin lebo to bolo zarovna okraja co bolo skarede*/
  border-radius: 5%;
  margin-left: 20px;
  }




 h2, h3, h4, h5, h6, p, cite, table { /*pre leosiu citatelnost, cisto dizajnova zalezitost*/
  
  margin: 15px;
  margin-left: 10px;
}


 .hlavnaNavigacia { /* tu som sa vyhral s hlavnou navigaciou kde su hlavne kategorie resp odkazy na hlavne podstranky, pekne do stredu, a s medzerami medzi tlacidlami*/
  display: flex;
  justify-content: center;
  gap: 100px;
  margin: 0;
  padding: 0;
  
 
  
  
}

.hlavnaNavigacia li { /*tu upravujem uz cisto vzhlad tlacitok ako takych*/
  display: inline;
  margin-top: 5px;
  background-color: rgba(248, 117, 70, 0.432);/* pekna tematicka farba vychadza aj z loga*/
  border-radius: 5px;
  padding: 1%;
  text-decoration: none;/*aby neboli furt podciarknute, pripomina to zaciatky internetu*/
  font-size: large;
  font-weight: bold;
  color: black;
  box-shadow: 0px 0px 2px 2px;
}

.hlavnaNavigacia li:hover {
  transform: scale(1.05);
}



footer, nav {
  display: flex;
  justify-content: center;
  background-color: white;
  border-radius: 15px;
  margin-top: 15px;
  box-shadow: 0px 0px 10px 10px rgba(0.2, 0.0, 0.2, 0.2); 
  gap: 100px; /* medzera medzi*/
}
.copyright {

  display: flex; /*flexibilny kontajner*/
  justify-content: center;/* obsah vycentreny na stred*/

}


.logo:hover img{
  transform: scale(1.05); /* pekne som nastavil aby ked sa prilozi mys na logo tak logo sa kustek zvacsi*/
}

.logo img {
  margin-left: 180px; /*centrovanie pozicie loga*/
  margin-top: 5px;/*z vrchu odsadenie 5px*/
  background-color: rgba(248, 117, 70, 0.432);
  border-radius: 10px;
 
  box-shadow: 0px 0px 2px 2px;

}

a {
  text-decoration: none;
  color: black;
}

a:hover {  
  color: rgb(69, 126, 179); /*aby sa pekne zvacsilo ked prejdem mysou ponad*/
  
}

header {
  display: flex;
  
}

h1 {
  margin-top: 52px;
  margin-left: 10px;
  font-size: xx-large;
  
}

th, td {
  border: 1px solid; /*vylepsenie tabulky, konkretne vonkajsi okraj tenucky 1px*/
  padding: 8px;
  text-align: center;
}

section, footer, nav {
  background-color: white;
  border-radius: 15px;
  margin-top: 15px;
  box-shadow: 0px 0px 10px 10px rgba(0.2, 0.2, 0.2, 0.2);

  
}

p {
  margin-left: 10px;
}

.obrazokObtekanie { /*nastavene obtekania s 10px ochrannym pasmom*/
  float: left; 
  margin: 10px; 
}