@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap');

body {
    margin: 0px;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}

header {
    padding: 10px 6%;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

header h1 {
    font-family: 'Comfortaa', Arial, Helvetica, sans-serif;
    color: #000;
    font-size: 32px;
}

header a {
    text-decoration: none;
    transition: 0.6s;
}

header h1 strong {
    font-size: 40px;
}

#odkazi {
    align-self: center;
}

#vrsek {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

ul {
    display: flex;
    flex-direction: row;
    align-items: center;
}

nav ul li ul li {
    list-style: none;
    display: none;
}

nav ul li {
    list-style: none;
    position: relative;
    right: 15px;
}

nav a {
    color: #000;
    padding: 10px;
    margin: 15px;
}

#buttony {
    display: flex;
    flex-direction: row;
}

button {
    padding: 8px 16px;
    margin: 0px 15px;
    align-self: center;
}

#bily {
    background-color: #fff;
    border: 2px #000 solid;
}

#bily:hover {
    background-color: #000;
    color: #fff;
    border: 2px #fff solid;
    transition: 800ms;
}

#zeleny {
    background-color: #32AD32;
    color: #fff;
    border: 2px #32AD32 solid;
}

#zeleny:hover {
    background-color: #000;
    color: #fff;
    border: 2px #fff solid;
    transition: 800ms;
}

section {
    display: flex;
    flex-direction: column;
    padding: 30px 8%;
}

#prvni {
    background-color: #000;
    padding-top: 100px;
    color: #fff;
    text-align: center;
}

#prvni h1 {
    font-size: 52px;
    line-height: 20px;
}

#prvni h2 {
    font-size: 32px;
}

.lokotoč {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#idk {
    padding-left: 10px;
}

#sectionButtony {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 35px 0px;
}

#cerny {
    width: 250px;
    background-color: #000;
    color: #fff;
    border: 1px #fff solid;
    padding: 10px 0px;
}

#cerny:hover {
    background-color: #fff;
    color: #000;
    border: 1px #000 solid;
    transition: 800ms;
}

#cerveny {
    width: 250px;
    background-color: #ff0000;
    color: #fff;
    border: 1px #ff0000 solid;
    padding: 10px 0px;
}

#cerveny:hover {
    background-color: #fff;
    color: #ff0000;
    border: 1px #000 solid;
    transition: 800ms;
}

#druhy h2 {
    color: #666666;
    font-size: 32px;
    text-align: center;
}

#druhy-div {
    display: flex;
    justify-content: center;
}

section div {
    display: flex;
    flex-direction: row;
}

section div article {
    display: flex;
    flex-direction: column;
    text-align: center;
}

#druhy article {
    margin: 20px 50px;
    color: #666666;
}

section div article h3 {
    font-size: 36px;
    line-height: 10px;
}

#druhy article p {
    display: flex;
    text-align: center;
}

#treti {
    background-color: #000;
}

#treti article {
    margin: 0px 20px;
    flex: 1;
}

#treti h2 {
    color: #fff;
    text-align: center;
}

#treti article p {
    color: #fff;
}

#treti article h3 {
    color: #ff0000;
}

#ctvrty {
    color: #fff;
    background-color: #D5251E;
    padding: 0px;
}

#ctvrty p {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
}

#paty {
    background-color: #000;
    color: #fff;
    flex-direction: row;
}

#paty div {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 10px 10px;
    text-align: left;
}

#paty div p {
    margin: 5px;
}

#paty h2 {
    border-bottom: 2px #D5251E solid;
}

.pes {
    color: #ff0000;
}

footer {
    background-color: #000;
    color: #cccccc;
    text-align: center;
    padding: 15px 0px;
}

@media (max-width:1000px) {
    .lokotoč {
        flex-direction: column;
    }

    .lokotoč span {
        margin: 20px 0px;
        padding: 20px 0px;
    }

    #vrsek {
        flex-direction: column;
        align-items: center;
    }

    ul {
        flex-direction: column;
    }

    li {
        margin: 7px 0px;
    }

    #buttony {
        flex-direction: column;
    }

    #buttony button {
        margin: 7px 0px;
    }

    #sectionButtony {
        flex-direction: column;
    }

    #sectionButtony button {
        margin: 7px 0px;
    }

    #druhy div {
        flex-direction: column;
        align-items: center;
    }

    #treti div {
        flex-direction: column;
        align-items: center;
    }

    #ctvrty {
        padding: 10px 5%;
    }

    #paty {
        flex-direction: column;
        align-items: center;
    }

    #paty div {
        text-align: center;
        width: 90%;
    }
}