body{
background:#690000;
color: BLACK
}
h1, h2{
    font-size: 4rem;
    text-align: center;
    font-display: swap;
    font-weight: 300 700;
    margin: 32px 60px;
      font-family: "Caveat Brush", static, monospace;
       color:#FFFFFF
}
 h2{   font-size: 2.5rem;   /* poznámka */
 text-align: center;
 margin: 1.5em 0.5em 0.8em 0;
  color:#FFFFFF
 }
 h4{   font-size: 3rem;   /* poznámka */
 text-align: center;
 color:#FFFFFF;
 
 }
 
  h5{   font-size: 1.5rem;   /* poznámka */
 text-align: center;
 margin: 1.5em 0.5em 0.8em 0;
  color:#FFFFFF;
  background: rgb(125,4,4,100);
  border: 5px double black;
    letter-spacing: 5px;
    
    

}
div.celyweb{
    margin: auto;
    max-width:1200px;
    background: rgba(255,255,255,0.3) ;
    border:5px double  rgba(0, 0, 0, 1);
    border-radius: 50px;
    padding-bottom: 100px;
    }
    
  
    div.menu a {
width: 280px;
height: 40px;
background: rgba(125,4,4,100);
color: white;
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: 3px; /*ať to není namačkané na sebe*/
border-radius: 999px;
transition: 0.5s;
border: solid black;
}
div.menu a:hover{ /*jak bude vypadat transition*/
letter-spacing: 7px;
background: rgba(110,31,31,100);
color:white;}
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 */
}
p{
    font-size: 1.5rem;
    color:#FFFFFF;
    font-style:verdana;
  margin: 16px 30px 20px 100px;
    line-height: 1.5;
}
p img{
    border: 5px solid rgb(105, 0, 0, 100);
    border-radius: 5%;
    float: left;
    margin: 0px 20px;
    rotate: 0deg;
    height: 270px;
    width: 200px;
 
}


p img:hover{
    border: 5px solid WHITE;
} 
    img {
    overflow-clip-margin: content-box;
    overflow: clip;

}
p a {color: #690000;}

p a:hover{
    color:PINK;
    text-decoration: none;/*když najedu na odkaz tak to co se stane naprogramuju tady*/
}
 ul a:hover{
    color:PINK;
    text-decoration: none;/*když najedu na odkaz tak to co se stane naprogramuju tady*/
}
 ul a{color: #690000;}

ul{ 
   font-size: 2rem;
    color:#FFFFFF;
    font-style:verdana;
    list-style-image:url(img/odr3.png);
  
}
ul ul{
color :white;
  list-style-image:url(img/odr2.png)

}
img.mini{ 
    height: auto;
    width: auto;
    border: 5px  solid rgb(92, 6, 6, 100);
    margin: 50px;
    border-radius:10%;
}
img.mini:hover{ 
    border: 5px solid white;
 cursor: pointer;
    transition: 0.5s;

}
fieldset{
    border:1px dotted white;
    border-radius: 30px;
}
legend{
    font-size: 1.5rem;
    color: white;
    background: darkred;
    padding: 3px 10px;
}