@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* font-family: "Raleway", serif;   
     font-family: "Josefin Sans", serif; */

body{
    margin: 0;
}
h1{
    font-family: "Raleway", serif;  
    margin: 0 0 10px;
    color: white;
    text-align: center;
}
span{
    color: rgb(156, 203, 131);
}
nav{
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 30px 0 0 0;
}
header a{
    font-family: "Raleway", serif;  
    text-decoration: none;
    color: white;
    padding: 10px 0;
}
a:hover{
    background-color: rgb(104, 139, 91);
    border-radius: 4px 4px 0 0;
}
.head-p{
    font-family: "Josefin Sans", serif;
    display: none;
}
img{
    width: max-content;
    max-width: 100%;
}
header{
    background-color: rgb(59, 75, 54);
    padding: 40px 6%;
    display: flex;
    flex-direction: column;
}
p{
    font-family: "Josefin Sans", serif;
    color: white;
}
h2{
    font-family: "Josefin Sans", serif;
    margin: 0;
    color: white;
}
article{
    display: flex;
    flex-direction: column;
}
main a{
    background-color: rgb(156, 203, 131);
    align-self: flex-end;
    text-decoration: none;
    color: rgb(59, 75, 54);
    font-family: "Raleway", serif;
    font-weight: bold;  
    padding: 5px 10px;
}
main .top article{
    background-color: rgb(59, 75, 54);
    margin: 5px;
    padding: 50px 20px 30px;
    flex: 1;
}
section{
    display: flex;
    flex-direction: column;
}
.mid h1{
    text-align: start;
}
.mid h2{
    font-size: 1em;
}
li{
    color: white;
    font-family: "Josefin Sans", serif;
}
ul{
    list-style-type: square;
}
.top{
    background-color: rgb(104, 139, 91);
    padding: 40px 6%;
}
.bottom{
    padding: 40px 6%;
    background-color: rgb(59, 75, 54);
    border-bottom: 4px solid rgb(104, 139, 91);
}
.mid{
    padding: 30px 7%;
    background-color: rgb(59, 75, 54);
}
.mid article{
    margin: 0 15px;
}
footer{
    background-color: rgb(59, 75, 54);
}
footer p{
    margin: 0;
    padding: 20px;
    text-align: center;
}
.this-page{
    background-color: rgb(104, 139, 91);
    border-radius: 4px 4px 0 0;
}
.flex2{
    flex: 2;
}
@media(min-width: 860px){
    .head-p{
        display: block;
        text-align: center;
        margin: 20px 0 35px;
    }
    .bottomImg{
        border-top: 3px solid rgb(104, 139, 91);
    }
    .topImg{
        display: none;
    }
    nav{
        flex-direction: row;
        justify-content: center;
    }
    nav a{
        padding: 10px 15px;
    }
    section{
        flex-direction: row;
        justify-content: center;
    }
}

@media (min-width: 1280px) {
    #top {
        display: flex;
        flex-direction: row;
        justify-content: space-between; /* mezera mezi - název webu a podtitul v jednom divu vlevo, nav s odkazy vpravo */
        align-items: flex-end;  /* zarovnání dolů */
    }
}

@media (max-width: 860px) {
    #top{
        padding-top: 10px;
        order: 1;
    }
  }