:root {
    --primary-color: #1f0b62;
    --detail-color: #3e3e3e;
    --font-color: #d4d4d4;
    --highlight-color: hwb(8 10% 13%);
    --font-size: 30;

}



a {
    background-color: inherit;
    color: var(--highlight-color);
    text-decoration: none;

}


#jmp_up {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 7;
    width: 60px;
    height: 60px;
    background-color: #ff8000;
    color: var(--font-color);
    font-family: 'Nunito Sans', sans-serif;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    box-shadow: 0 0 20px 5px rgb(255, 145, 0);
    display: none;
}



footer {
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: var(--font-color);
}

img {
    height: calc(100% - 10px);
    aspect-ratio: 366 / 116;
}

menu>li,
menu>li>a {
    list-style: none;
    color: #3c3c3c;
    background-color: #949191;
    display: flex;
    padding: 0;
    margin: 0;
    /* height: 40px; */
    font-size: 38px;
    justify-content: center;
    align-items: center;
    padding: 3px;
    text-align: center;
}

menu>li {
    border-top: #8a8a8a 3px solid;
    background-color: #330fad;
    color: #eaeaea;
}
img, .unselectable {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
menu>li>a {
    background-color: #330fad;
    display: block;
    color: #eaeaea;
}

menu {
    display: none;
    padding: 0;
    margin: 0;
    width: 100%;
    margin-inline: auto;
    transition: 100ms;
}

ul {
    padding-top: 0;
    list-style: none;
    padding: 0;
}

li>ul {

    list-style: circle;
    padding-left: 30px;
}

li {
    text-align: left;
}

h2 {
    margin: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 20px;
}

iframe {
    width: 100%
}

html,
body {
    padding: 0;
    border: 0;
    margin: 0;
    width: 100%;
    background-color: #d4d4d4;
    font-family: 'Nunito Sans', sans-serif;
}



h1 {
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 0;
}

article {

    font-size: var(--font-size)px;
    color: #3c3c3c;
}

span {
    /* display: inline; */
    display: list-item;
    list-style: none;
}

.kontakt {
    display: flex;
    flex-direction: column;
}

footer {
    font-size: var(--font-size)px;
    clear: both;
}

article {
    text-align: justify;
    padding-left: 15px;
    padding-right: 15px;
}
header {
    height: 15vh;
    justify-content: center;
    display: flex;
    align-items: center;
    background-color: var(--primary-color);
    padding-top: 1vh;
    padding-bottom: 1vh;
    z-index: 20;
}

main {
    font-size: var(--font-size)px;
    text-align: justify;
    background-color: white;
    box-shadow: 0 10px 20px 0px rgb(49, 49, 49);
    z-index: 1;
}

#arrow {
    color: white;
    display: none;

}

#slider {
    width: 100%;
    background-image: url("./img/slider/tin.png");
    background-repeat: no-repeat;
    background-size:cover;
    height: 50vh;
    transform-style: flat;
    transition: 700ms;
}

header>div>img {
    /* width: 80%; */
    height: 100%;
    aspect-ratio: 1;
    display: none;
}

#co_skupujemy>ul {
    padding-left: 10px;
}

h1 {
    font-size: 25px;
    padding-top: 5px;
}

h2 {
    text-transform: uppercase;
    font-size: 15px;
}

header {
    text-align: center;
    /* align-self: center; */
}
#slider {
    display: none;
}


@media (max-width: 600px) {
    main {
        width: 90%;
        /* background-color: #2e2e2e; */
        margin-inline: auto;
        margin-top: 0;
        display: block;
        height: calc(fit-content + 500px);
    }

    #jmp_up,
    #arrow {
        display: flex;
    }

    menu {
        display: block;
        text-transform: uppercase;
        /* padding: 10px; */
    }

    header>div {
        display: block;
        align-self: end;
        width: 40%;
        float: right;
    }

    header {
        /* center elements in y axis */
        align-items: center;
        
    }
    header>img {
        float: left;
        width: 60%;
    }

    header>div>img {
                
        height: 15vh;
        aspect-ratio: 1/1;
        display: block;
        margin:0px;
        float: right;
    }

    #rozwin {
        margin:0;
    }
    #slider {
        display: block;
    }
}



header {
    display: block;
    flex-direction: column;
}

.rozwijany {
    display: none;
    transition: 500ms;
}

@media (min-width:600px) or (width:600px) {
    main {
        width: max(80%, 600px);
        margin-inline: auto;
    }

   

    article {
        float: left;
    }


    #lewa {
        width: calc(60% - 30px);
        float: left;
    }

    #prawa {
        float: left;
        width: calc(40% - 30px);
    }

    .mapouter {
        display: block;
        /* float: left; */
    }
}


#header > img {
    aspect-ratio: 366/116;
}

/* @media () */