:root {           /*globalne premenne, pouzite neskor v kode*/
  --font-base: 'Tahoma', sans-serif;
  --font-heading: 'Trebuchet MS', sans-serif;
  --color-bg: #FFF8E3;
  --color-text: #3E2F1C;
}

.header {
  background: var(--color-bg); /*farba pozadia*/
  display:flex; /*dovoli obsah zarovnat podla dalsich nastaveni flexu*/
  justify-content: center; /*zarovna obsah na stred*/
  font-family: var(--font-heading);  /*styl pisma*/
  padding: 35px; /*vnutorne odsadenie z kazdej strany rovnako*/
}

.header h1 {
  font-weight: 100; /*hrubka pisma*/
  font-size: 80px; /*velkost pisma*/
}
nav.menu ul{
  list-style-type: none; /*ignorovat prednastavene odrazky zoznamu*/
  display: flex; 
  justify-content: space-around; /*rovnomerne rozloženie*/
  border-top: 1px solid; /*ciara nad menu*/
  border-bottom: 1px solid;   /*ciara pod menu*/
  border-color: var(--color-text);/*farba ciary nad a pod menu*/
  padding-top: 1%; /*vnutorne odsadenie hore*/
  padding-bottom: 1%; /*vnutorne odsadenie dole*/
  margin-bottom: 40px; /*vonkajsie odsadenie dole*/
}
nav.menu a {
  text-decoration: none; /*ignoruje prednastaveny styl nav*/
  font-family: var(--font-heading); 
  font-size: 25px ;
}
nav.menu a.active {
  border: 1px solid; /*ramik okolo textu*/
  border-color: var(--color-text);
  border-radius: 20px; /*zaoblenie rohov ramika*/
  padding: 5px 10px; /*vnutorne odsadenie textu od ramika, hore a dole 5, pravo vlavo 10*/
}
nav img{
  width:20px;
}
table img{
  width:20px;
}
body {
  background-color: var(--color-bg); /*farba pozadia stranky*/
  font-family: var(--font-base); 
  color: var(--color-text); /*farba textu*/
  padding: 40px;
}

.basen {
  font-style: italic;  /*text triedy basen je kurzivou*/
}
.image {
  width: 150px;  /*sirka*/
  height: 150px; /*vyska*/
}
img.chlieb{
  display: block;  /*umozni zmenit polohu obrazka*/
  margin-left: auto;    /*vlavo automaticky, aby sa to dostalo na stred*/
  margin-right: auto;   /*vpravo automaticky, aby sa to dostalo na stred*/
}
main {
max-width: 800px; /*obmedzenie sirky stranky*/
margin-left: auto; /*vlavo automaticky, aby sa to dostalo na stred*/
margin-right: auto;  /*vpravo automaticky, aby sa to dostalo na stred*/
}

main h2 {
  display:flex;
  justify-content: center;
}

section.obrazky {
 display:flex;
 flex-direction:column; /*zoradi pod seba zvrchu dole*/
 gap:10px; /*medzera medzi obrazkami*/
}
.zoom:hover{
  transform: scale(1.1);
  border-radius: 20px;
}
audio{
  border: 1px solid;
  border-radius: 20px;
  padding: 5px 10px;
}
.hudba{
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-top: 1px solid;
  border-bottom: 1px solid;
  padding: 20px;
  margin-top: 10px;
  margin-bottom: 10px;  
}
.videa video {
  width:395px;
  height:auto;  /*vyska sa autom. prisposobi sirke*/
}
.videa{
 display:flex;
 flex-direction: column;
 gap:10px;  
}
.skrynadpis {
 display:none; /*skryje nadpis*/
}
.uvodadresar {
 display:flex;
 gap:20px; 
 background-color:#889FE2;
 font-size:large;
 color:#E7F3FF;
}
section.adresar {
 display:flex;
 justify-content: space-around;
 gap:10px;
}
section.adresar article{
  display:flex;
  flex-direction: column;
  border: 1px solid;
  border-color: var(--color-text);
  background-color: snow;
  padding: 20px; /*vnutorne odsadenie textu od kraja ramiku*/
  margin:10px; /*vonkajsie odsadenie prvkov*/
  max-width:200px; /*obmedzenie sirky vypisu poloziek adresara*/
}
.chlieb {
 display:flex;
 gap:20px; 
}
.jar {
  background-color:#ecfebd;
}
.leto {
  background-color: #fef1bd;
}
.jesen {
  background-color:#fee2bd;
}
.zima {
  background-color: #e6faff;
}
.otacaniehviezdy {
  display:flex;
  border: 2px solid;
  border-color: var(--color-text);
  background-color: snow;
  max-width: 500px;
}

 .otacaniehviezdy ul{
  list-style-type: none; /*skryje odrazky zoznamu*/
  display: flex; 
  flex-direction:column;
  gap:10px;
 }
.hviezda {
  display: none;
}

:target {
  display: block; /*blokne nastavenie ze by sa nemalo zobrazovat a tak sa zobrazi*/
}
table.kalendar td {
   border-top: 1px solid; /*ciara nad menu*/
  border-bottom: 1px solid;   /*ciara pod menu*/
  border-color: var(--color-text);/*farba ciary nad a pod menu*/
  padding-top: 1%; /*vnutorne odsadenie hore*/
  padding-bottom: 1%; /*vnutorne odsadenie dole*/
}
.recept {
  display: none;
}
article:target {
  display: block;
}

.kontakt {
text-align: center; /*zarovnanie textu doprostred*/
}


footer {
  border-top: 1px solid;
  text-align: center;
  padding: 20px;
}