body{
background: #00b7ff;
background: linear-gradient(90deg, rgba(0, 183, 255, 1) 0%, rgba(0, 237, 166, 1) 100%, rgba(212, 30, 30, 1) 100%, rgba(237, 221, 83, 1) 100%); /*barevný prechod pozadí*/
/*background-image:url(image/Beskydy.JPG);*/ /*obrazek na pozadí*/
background-position:center center; /* obrázek na stred*/
background-repeat:no-repeat; /*neopakovat obrazek*/
background-size:cover; /*roztahnout obrazek pres celou plochu*/
background-attachment:fixed; /*pozadí se nehybe*/
color:white; /*bily text*/
font-family:"Playwrite New Zealand Basic Guides"; /*souhrn vsech fontu, styl pisma*/
}
h1, h2{ /*styl pro nadpisy*/
    font-size: 2.5rem; /*velikost pisma*/
    text-align: center; /*zarovnani pisma*/
}
h2{
    font-size: 1.5rem;   /* h2=mensi nadpis */
    
}
h3 {
    font-size: 1.5rem;  
    text-align: center;
    opacity: 0.7;
    clear:both;
    margin-top: 25px;
    color:black;
} 
div.celyweb{
    margin: auto; /*vycentrovani bloku*/
    max-width:999px; /*max sirka*/
   background:rgba(0,0,0,0.2); /*pruhledne pozadi*/
    border:3px solid black; /*cerny velky ramecek*/
    border-radius:0 0; /* rohy bez zaobleni*/
   /* padding-bottom:70px; /*spodni vnitrni mezera*/
}
p{
    margin:5px 10px; /* vzdalenost od okraju*/
    font-size:1.4rem; /* velikost textu*/
    color:white; /* barva pisma v odstavci*/
    font-style:italic; /*styl pisma/kurziva,tucne..*/
}


p img{
	transition: box-shadow 0.35s ease, transform 0.35s ease;
	transition: 0.5s ease;
	margin: 0 10px;
	float: left;
	filter: saturate(1);
}

p a img:hover{
	box-shadow: 0 0 20px 7.5px rgba(250,250,250,1);
	transform: scale(1.05);
	transform: translateY(-20px);
	filter: saturate(1.81);
	transition: 0.5s;
}
p a:hover{
color:lightgreen;
text-decoration:none; /*bez podtrzeni*/
}
div.menu{
display: flex;       /* to jak se zobrazuje element, elementy vedle sebe, tlacitka vedle sebe a nejsou pod sebou */
flex-wrap: wrap;        /* jestli se to muze zalomit nebo ne, bez wrapu se tlaci k sobe, s wrapem se da na dalsi radek */
justify-content: center;       /* horizontalni zarovnani */
align-items: center;        /* vertikalni zarovnani, jenom ve flexu */

}
.obsah{
    padding: 0 50px; /*odsazeni ze shora ci dola bocni mezery?*/
}
.menu a { /* styl tlacitek-menu*/
width: 210px;/*sirka tlacitka*/
height: 40px; /*vyska tlacitka*/
background:  #5C0000;
color: #F7C8C8;
font-size: 1.5rem;
display: block;     /* vychozi rozlozeni elementu, zabere maximalni sirku timpadem dalsi jde pod nej */
text-decoration: none;      /* podtrhnuti textu */
line-height: 40px;      /* vyska radku */
text-align: center;
margin: 0px;
border-radius: 999px;
transition: 0.5s; /*cas prechodu*/
border: solid #5C0000;
}
div.menu a:hover{ /* efekt po najeti*/
letter-spacing: 3px; /*rozestup pismen*/
background: #F7C8C8;
color: #5C0000;
}

ul{
    color:white;
    list-style-image:url(img/odrk.png);
    font-size:1.3rem;
}
ul ul{
    color:darkorange;
     list-style-image:url(img/odro.png);
}
.mini {
 height:250px; 
 width:auto;
 border:5px solid white;
 margin:25px;
}
.mini:hover{
    border:5px solid orange;
}

img.galerie{
     height:250px;
     width:250px;
    border: 5px solid white;     
    border-radius: 10px;         
    transition: all .4s ease;
    backface-visibility: hidden;    
    z-index: 2;                   
}

div.galerie-box {
  position: relative;
  display: inline-block;
  overflow: visible;        
  height: auto;
  margin: 10px;
  padding-bottom: 32px;
  padding-top: 20px;
  transition: all 0.4s ease;
  border-color: white;
}

div.galerie-box img.galerie {
  position: relative;
  display: block;
  transition: all 0.5s ease;
  z-index: 2;                         
  border-color: white;
    
}

div.galerie-text {
  position: absolute;
  bottom: 150%;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 10px;
  text-align: center;
  color: white;
  font-size: 2rem;
  font-weight: 400;
  transform: translateY(0);
  opacity: 0;
  transition: all 0.4s ease;
  pointer-events: none;
  z-index: 1;
  font-style: italic;
}

div.galerie-box:hover img.galerie {
  transform: translateY(30px) scale(1.1); /* obrázek klesne dolů */
  border-color: rgb(2, 48, 32);


}

div.galerie-box:hover .galerie-text {
  transform: translateY(-250%); /* text se vytáhne směrem nahoru */
  opacity: 1;
}







@media screen and (max-width: 999px) {     
div.menu{gap: 5px; height: 200px;}
div.menu a {width: 90%;}
p {max-width: 100%;}
legend{transition: none; font-size:1.5rem;}
legend:hover{transform: translateY(0px);}
fieldset{font-size: 1.4rem;}
h1{font-size: 3rem;}
img.galerie:hover{transform: rotate(0turn) scale(1);}
img.galerie{margin: auto; display: block; margin-bottom: 15px;}
div.galerie-box {margin: auto; display: block; margin-bottom: 15px;}
div.galerie-box:hover img.galerie {transform: translateY(30px);}

}






/* hover= efekt kdyz najedes*/
/* a odkazy*/
/* div cely blok*/
/* border je ramecek*/
/* border radius je zaobleni*/
/*flex wrap je ze se muze zalomit*/
/*font weight tloustka pisma */
/* font family typ pisma*/
/* text align zarovnani textu*/
/* margin vnejsi okraj zleva zprava*/
/* padding je posunuti ze shora a dola, vnitrni okraj*/
/* text decoration none je bez PODTRZENI*/
/* display typ zobrazeni*/
/* float obtekani*/