/*  #353044

  font-family: "Montserrat", sans-serif;
    font-family: "Festive", cursive;

    <img src="img/pozadi1_1280.jpg" srcset="css/pozadi1_640.jpg 640w, css/pozadi1_1280.jpg 1280w, css/pozadi1_1920.jpg 1920w" alt="Tulip">
*/

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

header  div h1{
    font-family: "Festive", cursive;
    margin: 0;
    font-size: 2.5em;
}
body{
    margin: 0;
    font-family: "Montserrat", sans-serif;
}
header{
    background-image: url(pozadi1_1920.jpg);
    background-size: cover;
    background-repeat: none;
    background-repeat: no-repeat;
}
.header{
    padding: 20px 10%;
    background-color: rgba(182, 111, 193, 0.4);
    margin-bottom: 60px;
}
nav a{
    color: black;
    text-decoration: none;
    border-radius: 5px;
    padding: 8px;
    margin: 5px 0;
    font-weight: bold;
}
a{
    text-decoration: none;
    color: white;
    background-color: rgba(182, 111, 193, 0.4);
    border-radius: 5px;
    padding: 8px;
}
header{
    color: white;
}
nav{
    display: flex;
    flex-direction: column;
}
header img{
    display: none;
}
header h2, header p{
    padding: 0px 10%;
    margin: 15px 0;
}
.tmava{
    background-color: #353044;
    color: white;
    padding: 30px 8%;
    display: flex;
    flex-direction: column;
}
.tmava article{
    flex: 1;
}
.tmava h1{
    text-align: center;
    padding: 10px;
}
.tmava p{
    text-align: justify;
}
.eshop{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
}
.eshop a{
    text-decoration: none;
    color: white;
    background-color: #353044;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 15px;
}
.eshop h2{
    font-size: 0.9em;
}
.eshop p, h2{
    margin: 10px;
}
.bila{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10%;
}
.bila p{
    align-items: flex-start;
}
.obrazky{
    display: flex;
    flex-direction: column;
    margin: 0px 5px;
}
.obrazky div{
    display: flex;
    flex: 1;
}
.obrazky article{
    padding: 60px 90px;
    background-position: left top;
    background-size: cover;
    border-radius: 5px;
    margin: 2.5px;
}
.bila h3{
    margin: 60px 0 10px;
}
.obr1{
    background-image: url(img/catmint-g07bb4295d_640.jpg);
}
.obr2{
    background-image: url(img/catmint-g9955b43aa_640.jpg);
}
.obr3{
    background-image: url(img/catmint-gcee70f40a_640.jpg);
}
.obr4{
    background-image: url(img/catmint-gdfbbc1173_640.jpg);
}
.galerie{
    display: flex;
    flex-direction: column;
    background-color: #353044;
}
.galerie img{
    margin: 1% 0.5%;
    border-radius: 5px;
    width: max-content;   
    max-width: 100%;
}

.nadpis{
    text-align: center;
    padding: 30px;
}
.textOdkaz{
    padding: 50px 8% 30px;
    display: flex;
    flex-direction: column;
}
.flex3{
    flex: 3;
}
.flex2{
    flex: 2;
}
.flex1{
    flex: 1;
}
.text{
    display: flex;
    flex-direction: column;
    padding: 50px 8% 30px;
    background-color: #353044;
}
.text article{
    padding: 10px;
    
}
.text article:last-child{
    border: none;
}
.text h3, .text p, .text li{
    color: white;
}
.text h3{
    text-align: center;
}
.mainBlog p{
    text-align: justify;
}
.textCisla{
    padding: 50px 8% 30px;
    display: flex;
    flex-direction: column;
}
.odkaz4{
    display: flex;
    flex-direction: column;
    padding: 50px 8% 30px;
    gap: 20px;
}
img{
    width: 100%;
    max-width: max-content;
}
.obrazky3{
    display: flex;
    flex-direction: column;
    padding: 50px 8% 30px;
    gap: 20px;
}
.seznam{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 8% 30px;
}
.doprostred h1{
    text-align: center;
}
.bez-odrazky{
    list-style-type: none;
}
iframe{
    width: 100%;
    height: 400px;
    border: none;
}
.mapa{
    padding: 0;
}
@media(max-width: 640px){
    nav a{
        background-color:white;
    }
    header h2, header p{
        display: none;
    }
    .header{
        margin: 0;
    }
}
nav a:hover{
    background-color: rgba(255, 255, 255, 0.4);
    transition: 0.5s;
}
@media(min-width: 640px){
    header{
        padding-bottom: 30%;
    }
    nav{
        flex-direction: row;
        gap: 10px;
    }
    nav a{
        color: black;
        background-color: white;
    }
    .tmava{
        flex-direction: row;
    }
    .tmava article{
      
        padding: 0 20px;
        flex: 1;
    }
    .galerie{
        flex-direction: row;
    }
    .galerie img{
        max-width: 11.5%;
    }
    header{
        background-repeat: no-repeat;
        background-size: cover;
        background-position: left top;
        padding-bottom: 25%;
    }
    .obrazky{
        flex-direction: row;
    }
}

@media(min-width: 1280px){
    .header{
        display: flex;
        flex-direction: row;
        justify-content:space-between;
        align-items: flex-end;
    }
    nav a{
        background-color: rgba(182, 111, 193, 0.4);
        color: white;
    }
    header{
        background-size: cover;
        background-position: left top;
        padding-bottom: 30%;
    }
    .text, .textCisla, .textOdkaz, .odkaz4{
        flex-direction: row;
    }
    .text article, .tmava article{
        border-right: 1px dotted white;
    }
    .tmava article:last-child{
        border-right: none;
    }
    .obrazky3{
        flex-direction: row;
    }
    .seznam{
        flex-direction: row;
        justify-content: center;
    }
    .doprostred{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}