body{
background: rgb(3,30,10);
background: linear-gradient(36deg, rgba(3,30,10,1) 21%, rgba(16,121,9,1) 51%, rgba(255,255,255,1) 94%);                                     
height: auto;                                                                 /*stránka bude mít výšku celého okna prohlížeče*/
font-family: "Delicious Handrawn", cursive;
font-weight: 400;
font-style: normal;
color: white;

}
h1, h2, h3{                                                                           /*nadpis a podnadpis, všechny věci color, font atd) které jsou uvnitř h1, h2, h3 napsané platí pro všechny.*/
    color: #381819;                                                                /*barva hnědá*/
    font-size: 4.5rem;                                                    /*velikost písma*/
    text-align: center;                                                  /*zarovnání na střed*/
  font-family: "Pinyon Script", cursive;
  font-weight: 600;                                                     /*tloušťka písma (400norm 700tlusté)*/
  font-style: normal;

}
h2{                                                                              /*podnadpis*/
    font-size: 1.5rem; /* velikost písma */
    font-weight: 300;
}
h3{
    font-size: 2.5rem;
    color: #0a3a0f;
    text-align: left;
    font-weight: bold;
    line-height: 20px;
    margin: 15px;
    
   
}
div.hlavni{                                                              /*div je jako popelnice mezi skládkami. Musíte třídit !stylizovat! odpad. div.hlavni je černá popelnice (v mém případě to je ten úvodní obrázek.*/
max-width: 1280px;                                                       /*max šířka*/
border: 5px dashed white;                                    /*okraj velký 5 pixelů, přerušovaný šedý*/
background: rgba(255, 255, 255,0.20);                /*bílé pozadí s průhledností 20%*/
border-radius: 50px;                                              /*zaoblené rohy velikost 50 px*/
margin: auto;                                                        /*bude to automaticky vycentrované, auto automaticky zaparkuje přesně doprostřed park místo aby byl stejně daleko od levé i pravé čáry*/
}
div.menu{                                          /*modrá popelnice, věci v div.menu platí jen na papír */
 display: flex;                                    /*znamená to že div.menu se bude chovat podle flex. (flex-wrap, justify-content, align-content.)*/
 flex-wrap: wrap;                             /*(pokud se na řádek nevejdou všechny věci tak se přesunou na další řádek*/
 justify-content: space-evenly;      /*rozmístí prvky rovnoměrně po celé šířce se stejnými mezerami*/
 align-content: center;                  /*všechny řádky se zarovnají ke středu*/


}

    
div.ramecek{
    list-style-image: url(IMG/odrazka1.png);
    text-align: left;
    font-size: 1.5rem;
    color: black;
    line-height: 40px;                                     /*výška řádku*/
    margin: 10px;
    font-family: "Pacifico", cursive;
}
div.ramecek1{
    border: 2.5px dotted white;                       /*refresh stránky aby ti jely styly je fn ctrl f5*/
    width: 50%;
    border-radius: 50px;                         /*zaoblení okrajů*/
    background: #6aaa71;                           
    margin: 10px;                            /*vzdálenost prvkem (ramecek1) a vnějších věcí*/
}    

    




p{                                               /*odstavce v html*/
margin: 15px;                            /*okraje jsou od okrajů vzdáleny 15 px*/
}
div.obsah{
}
div.menu a{                                   /*platí jen pro odkazy v divu protože a je odkaz*/
    width: 270px;                            /*šířka odkazu*/
    height: 45px;                             /*výška odkazu*/
    background: darkgreen;              /*pozadí*/
    display: block;                            /*odkazy se budou chovat jao bloky, budou na celém řádku*/
    color: #381819;                                /*barva hnědá*/
    font-size: 1.7rem;                        /*velikost písma*/
    margin: 3px;                                /*vzdálenost mezi ostatním textem. Prostě budou malé mezery mezi odkazy a textem. Nebudou nalepeny na sobě*/
    border-radius: 20px;                   /*zaoblené rohy*/
    text-align: center;                        /*zarovnání textu na střed*/
    line-height: 45px;                          /*text bude zarovnán. Nejen zleva doprava(text-align) ale i zhora a zdola!!!*/
    text-decoration: none;                  /*žádné podtržení*/
transition: 0.5s;                                   /*efekt změny bude trvat půl sekundy.*/
}
div.menu a:hover{                            /*je to div.menu pro odkazy, hover znamená co se stane po najetí myší*/
letter-spacing: 6px;                          /*mezi písmeny jsou větší mezery*/
}
ul{                                                                        /*seznam první úrovně*/
list-style-image: url(IMG/odrazka1.png);          /*budou tam odrážky ve formě obrázků místo obyčejné tečky*/
font-size: 1.5rem;                                               /*velikost písma*/
color: white;                                                   /*barva je bílá*/
line-height: 30px;                                             /*větší mezery mezi položkami*/
letter-spacing: 1px;                                            /*mezery nezi písmeny*/
text-align: left;                                               /*text se zarovná nalevo*/
margin: 15px;
font-family: "Pacifico", cursive;

}
ul ul{                                                                  /*seznam druhé úrovně*/
list-style-image: url(IMG/odrazka2.png);           /*obrázkové odrážky*/
font-size: 1.3rem;                                              /*velikost písma*/
color: darkgreen;                                                 /*tmavě zelená barva*/
line-height: 22px;                                                 /*větší mezery mezi položkami*/
letter-spacing: 5px;                                                /*mezery mezi písmeny*/
font-style: italic;                                                    /*styl písma italský*/
}
ul ul ul{                                                       /*seznam třetí úrovně*/
list-style-image: url(IMG/odr3now.png);        /*obrázkové odrážky*/
font-size: 1.1rem;                                           /*velikost písma*/
color: white;                                                       /* bílá barva*/
line-height: 22px;                                            /*větší mezery mezi položkami*/
letter-spacing: 5px;                                          /*mezery mezi písmeny*/
font-style: italic;                                                /*styl písma italský*/
}
img.mini{                                                  /*stylování pro malé obrázky*/
float: left;                                                  /*obrázek se zarovná doleva a text ho bude obtékat (float)*/
border: 1px solid pink;                                 /*okraj obrázku*/
margin: 10px;                                              /*bude nějaký neviditelný okraj kolem obrázku který zajistí, že text na něm nebude nalepený*/
rotate: 5deg;                                              /*obrázek je natočený*/
}

a{                                                      /*stylování pro odkazy celkově*/
color: silver;                                      /*barva*/
}
a:hover{                                         /*odkaz po najetí myší*/
text-decoration: none;                   /*žádné podtržení*/
color: white;                                    /*bílá barva*/
transition: 0.5s;                               /*doba té změny bude půl sekundy*/
}
img.galerie{                                 /*stylování pro obrázky v galerie.php*/
border: 5px solid white;              /*okraj je 5px plná čára(solid) bílý*/
margin: 60px;                               /*obrázky kolem sebe budou mít prostor*/
transition: 0.5s;                            /*změna přechodu trvá půl sekundy*/
}
img.galerie:hover{                     /*obrázky v galerii po najetí myší*/
border: 5px solid pink;               /*okraj je 5px plná čára, růžový*/
border-radius: 15%;                    /*zaoblí rohy na 15%*/
}
fieldset{
border: 3px dotted darkblue;
border-radius: 10%;
margin: 25px;
text-align: center;
background: rgba(255,255,255,0.3);
}
legend{
text-align: center;
background: rgba(255,255,255,0.8);
padding: 5px 10px;                               /*vzdálenost prvku od třeba okraje rámečku prostě vnitřní vzdálenost*/ 
color: pink;
}
span{
    color: pink;
    font-weight: bold;

}