@import url('normalize.css');
@import url('reset.css');

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

body, html {
    height: 100vh;
    margin: 0px;
}

body {
    display: grid;
    place-items: center;
}

.obal {
    display: grid;
    width: 100%;
    max-width: 1200px;
    min-height: 100vh;
    padding: 0 10px;
}
wrapper {
    display: grid;
    width: 100%;
    height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: 100px auto 75px;
    grid-template-areas:
        "header"
        "main"
        "footer";
}

    /*HEADER*/
    wrapper > header {
        grid-area: header;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        border-bottom: 1.5px solid #000;
        font-family: "Bree Serif", serif;
        font-size: 7mm;
    }

        wrapper > header a {
            color: black;
            text-decoration: none;
        }

        wrapper > header > .side-bar-1 > ul,
        wrapper > header > .side-bar-2 > ul {
            display: flex;
            flex-direction: row;
            gap: 50px;
            height: 100%;
            width: auto;
        }

            wrapper > header > .side-bar-1 > ul > li.headerActiveLink,
            wrapper > header > .side-bar-2 > ul > li.headerActiveLink {
                border-bottom: 4px solid #ff008d;
            }

            wrapper > header > .side-bar-1 > ul > li,
            wrapper > header > .side-bar-2 > ul > li {
                border-bottom: 4px solid transparent;
            }

                wrapper > header > .side-bar-1 > ul > li:hover,
                wrapper > header > .side-bar-2 > ul > li:hover {
                    border-bottom: 4px solid #ff008d;
                }



    /*MAIN*/
    wrapper > main {
        grid-area: main;
        width: 100%;
        height: 100%;
        /*odzazení*/
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 40px;
    }

    /*FOOTER*/
    wrapper > footer {
        /*grid*/
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-areas: ". div . . .";

        border-top: 1.5px solid;
        grid-area: footer;
        width: 100%;
        height: 100%;
    }

        wrapper > footer > div {
            grid-area: div;
            display: flex; /* Použij Flexbox */
            align-items: center; /* Vyrovná prvky vertikálně */
            font-family: "Rokkitt", serif;
            font-weight: 400;
            font-style: normal;
            font-size: 4.5mm;
            gap: 10px; /* Mezera mezi prvky */
        }

            wrapper > footer > div > p,
            wrapper > footer > div > div {
                margin: 0;
            }

*, *::before, *::after {
    box-sizing: border-box;
}