/* CSS Document */



* {

  box-sizing: border-box;

}



body {

  font-family: Arial;

  margin: auto;

  color: #000066;

  background: #D8DAF2;

  max-width: 1000px;

  display:flex; 

  flex-direction:column; 

  position: relative

}                 

body::after {

  content: '';

  display: block;

  height: 50px; /* Set same as footer's height */

}



/* Záhlaví ********************************************/

header {

  padding: 30px;          

  text-align: center;

/*  background-image: url(obrazky/znakOP.gif);

  background-position: 5% 50%;

  background-repeat: no-repeat;     */

  position: relative;

  

}

#zahlavi1 { font-size: 180%; font-weight:bold; }

#zahlavi2 { font-size: 150%; font-weight:bold;}



#vlajka {position: absolute;

  bottom: 1vw;

  right: 7.5vw;
 bo
}



header::after {   /*horizontální čára pod záhlavím. pže hr není vhodné pro designový prvek*/

  content:'';

  position: absolute;

  background-color: #000066;

  width: 80%;

  height: 2px;

  bottom: 0;

  left:10%;

  right:10%;

}





                  

/* Řádka designu */

.radek {  

  display: flex;

  flex-wrap: wrap;

}





/* Boční sloupec *************************************** */

aside {

  flex: 30%;

  padding: 20px;

}

 .menu {

  float:left;

  width: 100%;

}

.menu a {

  padding:8px;

  margin-top:7px;

  display:block;

  width:100%;

  color:black;

  text-decoration: none;

}

.menu a:hover { 

  background-color:#e5e5e5;

}

.menu a:active { 

  background-color:#e5e5e5;

}



/* Hlavní sloupec*/

#hlavni {

  flex: 70%;

  padding: 20px;

}





/* Zápatí padding: 5px 0;

  text-align: center;

  position: absolute;

  bottom: 0;

  width: 80%;

  background: #D8DAF2; */

footer {

margin-top:auto;

}

/* ********************************************************** */

img {max-width: 100%;

height: auto; 

overflow: auto;

}











/* ********************************************************** */




/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {

  .radek {   

    flex-direction: column;

  }

}