*{
    padding: 0;
    margin: 0;
}

html{
    scroll-behavior: smooth;
    scrollbar-width: 5px;
}

body{
    background-color: #0af011;

    font-family: Arial, Helvetica, sans-serif;
}

.nav-menu{
    width: 100%;
    top: -100%;
    background-color: #948979;
    position: fixed;
    border-top: #FF00FF 90px solid;
    transition: 0.5s;
}

.nav-menu.open{
    top: 0;
}

.nav-menu ul{
    list-style-type: none;
    display: flex;
    flex-direction:column;
    background: linear-gradient(to right,#153448 0%,#948979 100%); 
}

.nav-menu ul a li{
    padding: 20px 10px;
    color: white;
    background-color: #948979;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
    width: 100%;
    text-align: center;
    font-weight: bold;
}

.nav-menu ul a{
 text-decoration: none;
}

.nav-menu ul a li:hover{
    cursor: pointer;
    background-color: #DFD0B8; //světle hnědá při ukazaní na řádek menu
}

.hamburger-menu {
    cursor:pointer;
    display:block;
    height:20px;
    position:fixed;
    right:15px;
    top:15px;
    width:60px;
    z-index:900
}

.background{
    width: 100%;
    height: 90px;
    background: #00dd00; //zelený pruh nahoře
    position: fixed;
    top: 0;
    z-index: 100;
}

.hamburger-menu.open{
    position: fixed;
}

.bar {
    background-color:#fff;
    border-radius:3px;
    height:6px;
    margin:10px 0;
    transition:all .7s ease;
    width:100%
}

.hamburger-menu.open .bar:nth-child(1) {
    transform:rotate(-45deg) translate(-9px,6px)
}

.hamburger-menu.open .bar:nth-child(2) {
    opacity:0
}

.hamburger-menu.open .bar:nth-child(3) {
    transform:rotate(45deg) translate(-15px,-15px)
}

.container{
    padding-top: 10px;
    padding-bottom: 15px;
    background-color: #000000;
    width: 100%;
    text-align: center;
}

.container H1{
    color: white;
    font-size: 28pt;
    padding-top: 95px;
}

.container p{
    color: white;
    margin-top: 10px;
    font-size: 14pt;
}

.container img{
    width: 90%;
    padding-top: 25px;
    padding-bottom: 15px;
}

.container ul {
    padding: 0;
    display: flex;
    list-style: none;
    flex-direction: column;
    padding-bottom: 15px;
    padding-top: 25px;
}

.container ul li{
    padding: 10px 0;
    font-size: 16pt;
    color: white;
    font-weight: bold;
}

.container table{
    width: 90%;
    padding-top: 25px;
    padding-bottom: 15px;
    border-spacing: 0;
    margin: 0 50%;
    transform: translateX(-50%);
}


.container table tr th{
    color: white;
    font-weight: bold;
    font-size: 18pt;
    border: solid #DFD0B8 2px;
}

.container table tr td{
    color: white;
    border: solid #DFD0B8 2px;
    text-align: center;
    max-width: 100%;
    height: 60px;
}

@media screen and (min-width: 768px){

.nav-menu{
    z-index: 10;
}

.nav-menu ul a li{
    font-size: 20pt;
}    

.container {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.container p{
    width: 90%;
    
}

.container img{
    width: 70%;
}


#muj-obrazek {
  width: 450px; /* Nastaví šířku obrázku na 200 pixelů */
  height: auto; /* Zachová poměr stran */
/*  border: 2px solid blue; /* Přidá modrý rámeček */
  float: center; /* Zarovná obrázek do středu */
}

.container table{
    width: 90%;
    height: 150px;
    padding-top: 25px;
    padding-bottom: 15px;
    border-spacing: 0;
    margin: 0 50%;
    transform: translateX(0%);
}

.container table1{
    width: 90%;
    height: 150px;
    padding-top: 25px;
    padding-bottom: 15px;
    border-spacing: 0;
    margin: 0 50%;
    transform: translateX(0%);
    border: 2px solid black;
    border-radius: 10px;
}

}

@media screen and (min-width: 1399px) {
    .hamburger-menu, .background{
        display: none;
    }

    .nav-menu{
        top: 0;
        border-top: 0px solid;
    }

    .nav-menu ul{
        flex-direction: row-reverse;
        margin-right: 20px;
    }

    .nav-menu ul a li{
        background-color: #94897900;
        width: auto;
    }
    
    img{
        max-width: 60%;
    }

    .container .Sluzby li{
        font-size: 20pt;
    }
}