@import url('https://fonts.googleapis.com/css2?family=Festive&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
    margin: 0px;
    font-family: "Montserrat", sans-serif;
}

header h1 {
    font-family: "Festive", cursive;
    font-size: 4em;

}

img {
    width: 100%;
    max-width: max-content;
}

header {
    background-color: #353044;
    color: white;
    background-image: linear-gradient(rgba(5, 8, 11, 0.8)), url(css/pozadi2_1920.jpg);
    padding-bottom: 40%;
    background-position: left top;
    background-size: cover;

}

nav {
    display: flex;
    flex-direction: column;

}

nav a {
    color: #353044;
    background-color: white;
    margin: 5px;
    text-decoration: none;
    padding: 15px 10px;
    border-radius: 3px;
}

.top {
    background-color: #353044ad;
    padding: 5px 5%;
}

section {
    display: flex;
    flex-direction: column;
    padding: 20px 5%;
}

.tmava {
    background-color: #353044;
    color: white;
}

article {
    flex: 1;
    padding: 15px;
}

article h1 {
    align-items: center;
}

p {
    text-align: justify;
}

.prvni {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;

}

.prvni a {
    border: 2px solid;
    background-color: #353044;
    border-radius: 6px;
    text-decoration: none;
    color: white;
    width: 100px;
    padding: 10px;
}

.prvni article {
    align-items: center;
}

@media (min-width: 800px) {
    nav {
        flex-direction: row;
    }

    section {
        flex-direction: row;
    }

    .flex1 {
        flex: 1;
    }

    .flex2 {
        flex: 2;
    }
}

@media (min-width: 1000px) {
    .top {
        display: flex;
        flex-direction: row;
        align-items: last baseline;
        justify-content: space-between;

    }

    nav a {
        background-color: transparent;
        color: white;
    }


}



/* BLOG*/

.nadpis {
    justify-content: center;
    display: flex;
    padding: 10px;
}

article h1 {
    justify-content: center;
    display: flex;
    padding: 10px;
}

/* Contact*/

.contact {
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact  {
    text-align: justify;
}
.bila2{
    display: flex;
    flex-direction: column;
    align-items: center;
}
footer {
    background-color: #353044;
    display: flex;
    padding: 20px 5%;
    justify-content: center;
}

/* pro pokrocile*/

.img-text h1 {
    font-family: 'Courier New', Courier, monospace;
    padding: 0px;
    display: flex;

}

.img-text {
    padding: 5px 5%;
    transition: 0.3 ease-out;
}

.img {
    padding: 10px 20%;
}

.bila article {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.bila .stred p {
    text-align: center;
}


@media (min-width:800px) and (max-width:999px) {
    .img-text h3 {
        display: none;
    }
}

@media (max-width:799px) {
    .img-text {
        display: none;
    }
}

@media (min-width:1000px) {
    .tmava .prostredek {
        display: flex;
        flex-direction: column;
        align-items: center;



    }

    /*hover active*/
    nav a.active,
    nav a:hover {
        border: 2px solid;
        border-radius: 6px;
        background-color: gray;
    }

    .tmava .prostredek:first-child {
        display: flex;
        flex-direction: column;
        align-items: start;
    }
}

