body{

 background: rgb(202,210,224);
 background: linear-gradient(180deg, rgba(202,210,224,1) 0%, rgba(252,248,223,1) 100%);
 font-family: "Grenze Gotisch";
 }
 

h1{
 color: white;
 text-align: center;
 font-size: 5rem;
 }

h2{
 color: white;
 font-size: 2rem;
 margin-left: auto;
 text-align: center;
 position: relative;
 justify-content: center;
 clear: both;
}
 
 
 
 
 p{
 color: white;
 text-align: center;                                                                        /* left, right nebo center*/
 font-size: 25px;
 line-height: 1.5;
 max-width: 95%;
 }
 
p.dotaznik{
 color: white;
 text-align: center;                                                                        /* left, right nebo center*/
 font-size: 25px;
 line-height: 1.5;
 max-width: 100%; 
 }
 
 
 .otazky {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 30px;
}

.otazka {
    background-color: rgba(252,248,223, 0.15); 
    border: 2px solid white;
    border-radius: 15px;
    padding: 20px 30px;
    width: 100%;
    max-width: 800px;
    box-sizing: border-box;
    color: white;
    text-align: left;
}

.otazka legend {
    font-size: 1.5rem;
    margin-bottom: 15px;
    text-align: center;
}

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 
 
ul{
  text-align: left;
  color: rgba(255,255,255,0.99);
  font-size: 2.4rem;                                                                        /* nezapomeň, že zde jest americký zápis - totiž neužíváš čárku, nýbrž tečku: 2.3rem */
  list-style-image: url(img/odr1.png);
}

ul ul{
   font-size: 1.9rem;
   color:  rgba(255,255,255,0.9);
   list-style-image: url(img/odr2.png);
}	
ul ul ul{
	font-size: 1.8rem;
	color:  rgba(255,255,255,0.9);
	list-style-image: url(img/odr3.png);
}
	
	
	
	



/*p a img:hover{
	border: 5px solid pink;
 }*/
 
a:link {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

a:hover {
  color: rgb(202,210,224);
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}






p.go{
	margin: auto;
	width: 1280px;
}
p.go img{
	border: 5px solid white;                                                                /* nejprve x px (3px, 4px...), poté typ ohraničení (dotted, solid...), poté barva (white, blue...) */
	margin: 0 20px;
	float: left;
    transition: all .6s ease;
    backface-visibility: hidden;
    display: block;
} 
p.go img:hover{
    border: 5px solid rgb(2, 48, 32);
    transform: scale(1.125);
}


	


 /* div.styl{
 	margin: auto;
	width: 990px;
	 background: rgb(255,199,153);
	background: linear-gradient(180deg, rgba(255,199,153,0.499019676229867) 0%, rgba(211,251,216,0.499019676229867) 100%); 
	border-radius: 20px; /*to tu máš tak, že se jde po směru hodinových ručiček od levého horního okraje, (0; 30; 0; 30) */
 /* } */
 
 div.hlavni{
	margin:auto;
	max-width: 1280px;
	background: rgb(91,35,51);
	background: linear-gradient(180deg, rgba(91,35,51,1) 0%, rgba(86,77,74,1) 100%); 
	border-radius:30px;                                                                     /* též možno postupně: 0 30px 0 30px, což zakulatí jen některé rohy */
     
 }
	
div.hlavicka{
   /*  background-image: url(img/skola.jpg);
    height: 295px;
    border-radius: 30px 30px 0 0; */
    
	}
	
	
	
	
div.menu{
	margin-top: -8px;
    height: 70px;
    background:  rgb(2, 48, 32);
    display: flex;  
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: center;
    text-align: center;
    gap: 60px;
	}
	
div.menu a{
    width: 20%;
    height: 40px;
    display: block;
    line-height: 40px;
    background: black;
    border-radius: 7px 7px 7px 7px;
    color: white;
    text-decoration: none;
    font-size: 2rem;
    transition: .5s ease;

}

div.menu a:hover{
    letter-spacing: 4px;
    text-shadow: 2px 2px rgb(202,210,224);
    background: rgb(255,255,255);
    color: black;
}

       
div.obsah{ 
	/* margin: auto;
	width: 990px;
	 background: rgb(255,199,153);
	background: linear-gradient(180deg, rgba(255,199,153,0.499019676229867) 0%, rgba(211,251,216,0.499019676229867) 100%); 
	border-radius: 20px; */
}

div.fieldsety{                    /*tohle máš u fieldsetů; zajišťuje ti to, že jsou v centru*/
    justify-content: center;
    width: 100%;
    display: flex;
}



fieldset{
    color: white;
    text-align: center;
    font-size: 1.5rem;
    background-color: rgb(2, 48, 32);
    border-radius: 30px 30px 30px 30px;
    width: 100%;
    max-width: 1000px;
  /*  align-items: center; */
    border-color: white;
  /*  justify-content: center;*/

}


legend{
    font-size: 2.5rem;
    transition: all 1s ease-in-out;
    text-align: center;
    justify-content: center;
    display: block;
    margin: 0 auto;                             /* toto mi nějakým zázrakem pomohlo dát legendu do středu*/
}

legend:hover{
    transform: translateY(-25px) scale(1.5);
}






img.galerie{
    border: 5px solid white;     /*prostě ten bílý pásek okolo*/
    border-radius: 10px;         
    transition: all .4s ease;
    backface-visibility: hidden;    
    z-index: 2;                     /*říká, že leží NAD z-index 1, tedy v mém případě text*/
}

div.galerie-box {
  position: relative;
  display: inline-block;
  overflow: visible;        /*zajišťuje, že zvětšení obrázku je vidět*/
  height: auto;
  margin: 32px;
  padding-bottom: 10px;
  padding-top: 20px;
  transition: all 0.4s ease;
  border-color: white;
}

div.galerie-box img.galerie {
  position: relative;
  display: block;
  transition: all 0.4s ease;
  z-index: 2;                           /*říká, že leží NAD z-index 1, tedy v mém případě text*/
  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) {     /*pokud otevřeš na mobilu, následující vlastnosti se mění na...*/
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);}

}