* {
  box-sizing: border-box;
}

body {
    margin: 0;
    background: #DBE2EE;
    font: 18px Arial, sans-serif;
    }
h1 {
    color: orange;
    }
    
/* styl hlavičky */
.header {
    background-color: #EEEEEE;
    padding: 20px;
    align-items: center;
    text-align: center;
    }

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Vytvoříme tři nestejné sloupce plující vedle sebe*/
.column {
  color: #5555ff;
  float: left;
  padding: 10px;
}

/* Pravý a levý sloupec */
.column.side {
  width: 25%;
}

/* Prostřední sloupec*/
.column.middle {
  width: 50%;
}

/* Vyčištění okolí po sloupcích */
.row:after {
  content: "";
  display: table;
  clear: both;
}            


/* zápatí */
.footer {
    background-color: #BBC6EE;
    color: #0000FF;
    position: bottom;
    margin-left: 20px;
    margin-right: 20px;
    padding: 20px;
    text-align: center;
    align-items: center;
    font: 10px Lucida Console;
    }
  
.languages {
    background-color: #BBC6EE;
    //text-align: center;
    align-items: center;
    text-align: center;
    vertical-align: baseline;
    }
  
.tabulka{
    float:center;
    border: 2px solid #C0D0EE;   //síla a styl okolo tabulky 
    //margin-left:100px;
    padding:1 8px;
    }


/* Responzivní rozvržení – vytvoří tři sloupce naskládané na sebe, nikoli vedle sebe */
@media screen and (max-width: 600px) {
  .column.side, .column.middle, {
    width: 100%;
  }
}