.wrapper {
    display: flex;  
    flex-flow: row wrap;

    text-align: center; 
  }
  
  .wrapper > * {
    padding: 10px;
    flex: 1 100%;
  }
  
  .header {
    background: rgba(170, 170, 170, 0.149);
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 25px;
  }
  
  .footer {
    background: rgba(220, 221, 220, 0.353);
  }
  
  .main {
    text-align: left;
    background: rgba(248, 249, 249, 0.793);
    padding: 50px;
  }
  
  .aside-1 {
    background: rgba(60, 60, 60, 0.764);
    height: 
  }
  
  .aside-2 {
    background: hotpink;
    
  }
  
  @media all and (min-width: 400px) {
    .aside { flex: 1 0 0; }
  }
  
  @media all and (min-width: 600px) {
    .main    { flex: 3 0px; }
    .aside-1 { order: 1; } 
    .main    { order: 2; }
    .aside-2 { order: 3; }
    .footer  { order: 4; }
  }
  
  body { 
    padding-left: 15%; 
    font-family: Sofia Sans Condensed;
    width: 70%;
    align-items: center;
    align-content: center;
    justify-content: center;
    text-align: center;
    display: flex;

  }

  html{
    
    background: rgb(30,20,179);
    background: -moz-linear-gradient(216deg, rgba(30,20,179,1) 0%, rgba(249,148,59,1) 70%, rgba(215,14,5,1) 100%);
    background: -webkit-linear-gradient(216deg, rgba(30,20,179,1) 0%, rgba(249,148,59,1) 70%, rgba(215,14,5,1) 100%);
    background: linear-gradient(216deg, rgba(30,20,179,1) 0%, rgba(249,148,59,1) 70%, rgba(215,14,5,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1e14b3",endColorstr="#d70e05",GradientType=1);
height: 200%;
  }
  .img1 {
    border: 1px solid #ddd;
    border-radius: 50%;
    padding: 3px;
    width: 170px;
  }
aside{
    color: rgb(219, 223, 223);
    padding-top: 30px;


}
.citat {
  color: rgb(219, 223, 223);
  font-style: italic;
  text-align: right;
}
.citat1{
    padding-top: 30px;
}
.obsah{
    font-style: normal;
    margin-left: 20px;
    width: 25%;
}
.logo{
    width: 100%;
    mix-blend-mode: overlay;
    opacity: 90%;
    margin-bottom: 20px;

}


li {
   margin-top: 50px;
    display: inline;
  }
  
  a {
   margin: 10px;
    padding: 8px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #dddddd04;
    text-decoration: none;
    color: black;
    font-weight: bolder;
    font-size: larger;
    
  }

  .MENU:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    cursor: pointer;
  }

.bar1 {
    width: 200px;
    height: 5px;
background: linear-gradient( 90deg, red 90%, white 10%);
    border-radius: 25px;
    border-style                :   solid;
    border-width                :   1px;
    border-color                :   #000000;

}  
.bar2 {
    width: 200px;
    height: 5px;
background: linear-gradient( 90deg, red 70%, white 30%);
    border-radius: 25px;
    border-style                :   solid;
    border-width                :   1px;
    border-color                :   #000000;

} 
.bar3 {
    width: 200px;
    height: 5px;
background: linear-gradient( 90deg, red 95%, white 5%);
    border-radius: 25px;
    border-style                :   solid;
    border-width                :   1px;
    border-color                :   #000000;

} 
.bar4 {
    width: 200px;
    height: 5px;
background: linear-gradient( 90deg, red 80%, white 20%);
    border-radius: 25px;
    border-style                :   solid;
    border-width                :   1px;
    border-color                :   #000000;

} 
.bar5 {
    width: 200px;
    height: 5px;
background: linear-gradient( 90deg, red 65%, white 35%);
    border-radius: 25px;
    border-style                :   solid;
    border-width                :   1px;
    border-color                :   #000000;

} 

.img2 {
    border: 1px solid #ddd;
    border-radius: 50%;
    padding: 3px;
    width: 100px;
    float: left;
    
}
.pis{
text-align: center;
justify-content: center;
width: 350px;
height: 200px;


}