html{
    scroll-behavior: smooth;
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

body{
    margin: 0%;
}
img{
    width: 100%;
    max-width: max-content;
}
li{
    margin: 10px;
}
header{
    background-color: #333333;
    padding: 50px;
    
}
.bila a{
    color: white;
    background-color: #AA0000;
    text-decoration: none;
    margin: 5px;
    padding: 10px;
    align-items: center;
}
header p{
    color: white;
    padding: 5px;
    margin: 10px;
}
.nazev{
    text-align: center;
    color: #AA0000;
    font-size: 3em;
}
.top4{
    display: flex;
    justify-content: space-between;
    text-align: center;
}
.obr{
    display: none;
}
nav{
    display: flex;
    flex-direction: column;
}
nav a{
    text-decoration: none;
    margin: 5px;
    padding: 10px;
    color: white;
}
strong{
    font-weight: 900;
}
.actual{
    color: #D83A3A;
}
main{
    padding: 25px;
}
main article{
    text-align: justify;
    flex-direction: column;
    flex: 1;
    margin: 20px;
    padding: 20px;
}
h2{
    text-align: center;
    color: #AA0000;
}
.druha article{
    
    padding: 0;
    margin: 20px;
}
.druha img{
    border: 7px solid black;
}
p{
    text-align: center;
}
footer{
    color: white;
    background-color: #333333;
    padding: 10px 25px;
    justify-content: center;
    display: flex;
    flex-direction: row;
}
footer article{
    margin: 0px 25px;
}
@media(min-width:1000px){
    header img{
        display: block;
    }
    nav{
        display: flex;
        flex-direction: row;

    }
    .top{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
    .prvni{
        display: flex;
        flex-direction: row;
    }
    .druha{
        display: flex;
        flex-direction: row;
    }
    .treti{
        display: flex;
        flex-direction: row;
    }
    .flex2{
        display: flex;
        flex: 2;
    }
    .flex1{
        display: flex;
        flex: 1;
    }
    .flex1 article{
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    .obr{
        display: block;
        border: 10px solid gray;
        position: relative;  top: 70px;
    }
    .top2{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.top3{
    display: flex;
    flex-direction: column;
    margin: 20px;
}
.top4{
    display: flex;
    justify-content: space-between;
}
}