body{
background: #EB1515;/* základní barva pozadí */
background: linear-gradient(90deg,rgba(235, 21, 21, 1) 0%, rgba(252, 133, 69, 1) 50%, rgba(235, 21, 21, 1) 100%); /* přechod barev */
 /*background-image:url(img-obrazky/Soumrak.jpg); obrázek pozadí */
background-position:center; /* obrázek na střed */
background-repeat:no-repeat; 
background-size:cover;
background-attachment:fixed; /* obrázek zůstává při scrollování */
color: Maroon; /* barva textu */
font-family:"Barlow Condensed"; /* písmo */
}
h1, h2, h3, h4{ /* Nadpisy */
    font-size: 3rem; 
    text-align: center; /* zarovnání na střed */
}
h2{
    font-size: 2.5rem;   /* poznámka */
}
h3{
    font-size: 1.5rem;
     padding-left: 300px;
}
h4{
    font-size: 1.5rem;
}
div.celyweb {  /* Hlavní kontejner stránky */
    margin:auto; /* vycentrovani bloku */
    max-width: 1200px; /* maximální šířka */
    background: rgba(255,255,255,0.3); /* průhledné pozadí */
    border: 5px solid Maroon; /* rámeček */
    border-radius:30px ; /* zaoblení rohů */
    padding-bottom: 80px; /* vnitřní okraj dole */
}
div.menu{ 
display: flex;       /* to jak se zobrazuje element, elementy vedle sebe */
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 */

}
div.obsah{
    padding: 50px; /* vnitřní okraj vlevo a vpravo */
}
/* Odkazy v menu */
div.menu a {
width: 280px; /* šířka odkazu */
height: 40px; /* výška odkazu */
background:  #5C0000; /* pozadí odkazu */
color: #F7C8C8; /* barva textu */
font-size: 1.5rem; /* velikost textu */
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; /* zarovnání textu */
margin: 3px; /* mezera kolem odkazu */
border-radius: 999px; /* kulaté rohy */
transition: 0.5s; /* plynulý efekt při hover */
border: solid #5C0000; /* rámeček */
}
/* Efekt při najetí myší */
div.menu a:hover{
letter-spacing: 3px; /* mezery mezi písmeny */
background: #F7C8C8;
color: Maroon;
}
div{
 margin: auto; /* vycentrování */
 max-width: 1200px; /* maximální šířka */
 border: 3px solid maroon; /* rámeček */
 border-radius:  12px ; /* zaoblení rohů */
 background: rgba(255,255,255,0.2);
 padding-bottom: 0px;  /* dolní okraj */
 padding-top: 0px;
}
p{
      margin: 10px 15px; /* mezera kolem odstavce */
      font-size: 1.8rem; /* velikost písma */
      color:SaddleBrown;
      font-style:italic; /* kurzíva */
      }
      /* Obrázky uvnitř odstavců */
      p img{
 height:180px;
 border: 4px Solid FireBrick;
 float: left; /* obtékání textem z pravé strany */
 rotate: 0deg; /* otočení obrázku */
 margin: 15px; /* mezera kolem obrázku */
 border-radius: 20px;
 transition: 0.6s;
 }
 p img:hover{
      border: 4px solid saddlebrown;
        border-radius: 20%;
        box-shadow: 0px 0px 17px 3px white;
 }
 /* Hlavní hlavička obrázku */
img.hlavicka{
     border-radius:25px 25px 0px 0px; /* zaoblení rohů nahoře */
     width:100%; /* celá šířka kontejneru */
     height:auto; /* zachování proporcí */
     display: block;
 }
 /* Odkazy obecně */
  a{
     color:FireBrick  ;
 }
 /* Hover efekt pro odkazy */
 a:hover{
     text-decoration:none; /* odstranění podtržení při hover */
     
 }
 ul{
     color:Maroon;
     font-size: 1.8rem;
     list-style-image: url(img/odrazka1.png)
     
 }
 ul ul{
     color:black;
      list-style-image: url(img/odrazka2.png)
 }
 img.mini{
     height:200px;
     width:auto;
     border:5px solid maroon;
     margin: 25px;
     transition: 0.5s;
 }
 img.mini:hover{
      border: 5px solid saddlebrown;
        border-radius: 10%;
        box-shadow: 0px 0px 17px 3px white;
 }
     
     
 /*color = barva textu
background-color = barva pozadí
font-size = velikost písma
font-family = typ písma
font-weight = tloušťka písma
text-align = zarovnání textu

width = šířka
height = výška

margin = vnější okraj
padding = vnitřní okraj
border = rámeček

display = typ zobrazení (block, inline, inline-block)
position = pozicování (static, relative, absolute, fixed)
float = obtékání (left / right)
*/