body {
    padding: 0;
    margin: 0;
    font-family: 'Rubik', sans-serif;
    overflow-x: hidden ;
    transition: backdrop-filter 0.5s ease;
}

/*<---------------------------------logos--------------------------------------------->*/
#logos {
    border-bottom: 0.159659393vw solid black;
    background-color: #f4f4f4;
    width: 100%;
}

#logos #logo3 {
    width: 15.965939329%;
    padding-left: 41.51144225%;
}
/*
#logos li a {
    text-decoration: none;
    color: black;
    font-size: 1.064395955%;
}

#logos ul {
    list-style: none;
    margin-left: 10.643959553%;
    margin-top: 3.193187865%;
    padding: 0;
    display: flex;
    gap: 2.12879191vw;
    align-items: center;
    float: left;
}

#logos ul li {
    padding: 0 0.532197977vw; 
    width: auto; 
}
*/
/*<---------------------------------top--------------------------------------------->*/
#top {
    height: 9.04736562%;
    width: 100%;
    float: left;
    margin-bottom: 1.064395955%;
}
#top ul {
    list-style: none;
    margin-left: 30.867482703%;
    padding-top: 4.257583821%;
    margin-top: 3.193187865%;
    padding: 0;
    display: flex;
    gap: 1.064395955%; 
}

#top li {
    margin: 0;
    padding: 0;
}

#top li a {
    text-decoration: none;
    color: black;
    transition: border-bottom 0.4s ease;
    font-size: 1.17083555vw;
    padding: 0px 1.064395955vw; 
    border-bottom: 0.106439595vw solid transparent;
    position: relative;
}

#top li a:hover {
    border-bottom: 0.106439595vw solid black;
}

/*<---------------------------------menu--------------------------------------------->*/
#menu {
    background-image: url(obrazy/pattern4-1.png);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 37.253858435vw;
    margin-top: 9.04736562vw;
    border-radius: 0.532197977vw;
}



#menu .blok {
    width: 13.304949441vw;
    height: 18.626929217vw;
    margin: 0.798296966vw;
    outline: white 0.159659393vw solid;
    border-radius: 0.266098988vw;
    float: left;
    background-color: white;
    overflow: hidden;
    position: relative;
    margin-left: 3.991484832vw;
    margin-top: 5.321979776vw;
    margin-bottom: 2.12879191vw;
    transition: transform 0.25s ease-in;
}

#menu .blok img {
    width: 100%;
    height: 100%;
}


#menu .blok:hover{
    transform: scale(1.1);
}

#menu #bloki {
    margin-left: 20.755721128vw;
}

/*<---------------------------------section1--------------------------------------------->*/
#section1 {
    margin: 0;
    height: 3.991484832vw;
    padding-bottom: 3.193187865vw;
    text-decoration: none;
}

#section1 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    margin-bottom: 2.660989888vw;
    margin-left: 21.287919105vw;
}

#section1 ul li {
    display: inline-block;
    padding: 0.532197977vw;
    white-space: nowrap;
    box-sizing: border-box;
    margin-top: 0.798296966vw;
}

#section1 ul li a {
    text-decoration: none;
    font-size: 0.957956359vw;
    color: white;
    padding: 0.532197977vw 0.798296966vw;
    padding-left: 4.789781798vw;
    padding-right: 4.789781798vw;
}

#section1 a {
    margin-top: 5.321979776vw;
    text-decoration: none;
    color: black;
    font-size: 1.064395955vw;
}

#section1 li a {
    border-bottom: 0.106439595% solid transparent;
    position: relative;
    transition: border-bottom 0.3s ease;
}

#section1 li a:hover {
    border-bottom: 0.106439595% solid white;
}



/*<---------------------------------main--------------------------------------------->*/
#main {
    height: 26.609898882vw;
    background-color: #E6E6E6;
    justify-content: center;
    position: relative;
}

#main #opis{
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 42.575838211vw;
    height: 15.965939329vw;
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    justify-content: center; 
    align-items: center;
}

#main #opis p{
    margin: 1.064395955vw;
    font-size: 1.064395955vw;
    text-align:  center;
    padding: 1.330494944vw;
}




#main .akcesoria{
    text-align: center;
    padding-top: 5.321979776vw;
}


#main .akcesoria h2{
    font-size: 1.703033528vw;
}

#main .akcesoria h4{
    font-size: 1.011176157vw;
}



#main2  {
        height: 47.897817988vw;
        color: black;
    }

#main2 #tematy{
        width: 79.829696647vw;
        height: 47.897817988vw;
        margin-left: 5.321979776vw;
        margin-top: 6.65247472vw;
    }
    
.temat{
        width: 53.219797764vw;
        height: 10.643959553vw;
        border: 0.159659393vw solid black;
        border-radius: 30px;
        margin-left: 18.626929217vw;
        margin-top: 3.991484832vw;
        text-align: center;
        transition: transform 0.3s ease-in-out;
    }

 .temat:hover{

    transform: scale(1.1);
 }


 #main3 {
    height: 63.863757317vw;
    background-color: #E6E6E6;
    display: flex;
    justify-content: center;
    position: relative;
}

#main3 #karta {
    width: 53.219797764vw;
    height: 53.219797764vw;
    background-color: white;
    border-radius: 2.12879191vw;
    margin-top: auto;
    margin-bottom: auto;
}

#karta #logowanie i{
    color: grey;
    font-size: 0.798296966vw;
}


#main4{
    height: 55.880787653vw;
}

#main4 #kontakt{
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 42.575838211vw;
    height: 18.626929217vw;
    position: relative; 
    top: 20%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    text-align: center;
    justify-content: center; 
    align-items: center;
}


#main4 #sociale{
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 42.575838211vw;
    height: 26.609898882vw;
    position: relative; 
    top: 35%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    text-align: center;
    justify-content: center; 
    align-items: center;
    float: left;
}


#main2 #oboz{
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 42.575838211vw;
    height: 15.965939329vw;
    position: relative; 
    top: 30%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    text-align: center;
    justify-content: center; 
    align-items: center;
    float: left;
}

#main2 #oboz p{
    margin: 1.064395955vw;
    font-size: 1.064395955vw;
    text-align:  center;
    padding: 1.330494944vw;
}


#main2 #camp{
    text-align: center;
    float: left;
    margin-top: 10.643959553vw;
}



#main2 #opis2{
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 42.575838211vw;
    height: 42.575838211vw;
    position: relative; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    justify-content: center; 
    align-items: center;
}

#main2 #opis2 p{
    margin: 1.064395955vw;
    font-size: 1.064395955vw;
    text-align:  center;
    padding: 1.330494944vw;
}

#main5{
    height: 74.50771687vw;
    text-align: center;
}

#main5 #opis{
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 42.575838211vw;
    height: 47.897817988vw;
    position: relative; 
    top: 40%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    justify-content: center; 
    align-items: center;
}

#main5 #opis p{
    margin: 1.064395955vw;
    font-size: 1.064395955vw;
    text-align:  center;
    padding: 1.330494944vw;
}

#main5  #guzik {
    width: 5.321979776vw;
    height: 1.330494944vw;
    border: black;
    color: #B2B0FF;
    border-radius: 2.660989888vw;
    font-size: 0.745077168vw;
    transition: color 0.25s ease, background-color 0.25s ease-in-out;
}

#main5  #guzik:hover {
    border: black;
    color: #A092E5;
}

#main5 #plan{
    margin-top: 15.965939329vw;
    font-size: 0.957956359vw;
}


/*<---------------------------------midsection--------------------------------------------->*/

#midSection{
    height: 26.609898882vw;
    width: 100%;
    background-color: #D9D9D9;
    justify-content: center;
    position: relative;
}


#midSection #spolecznosc {
    border: 0.266098988vw solid black;
    border-radius: 1.064395955vw;
    width: 37.253858435vw;
    height: 15.965939329vw;
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    justify-content: center; 
    align-items: center;
}

#midSection #spolecznosc p{
    margin: 1.064395955vw;
    font-size: 1.064395955vw;
    text-align:  center;
    padding: 1.330494944vw;
}

#midSection #spolecznosc a{
    text-decoration: none;
    text-align: center;
    color: #A092E5;
    transition: color 0.2s ease-in-out;
}

#midSection #spolecznosc h3{
    font-size: 0.957956359vw;
}

#midSection #spolecznosc a:hover{
    color: #B2B0FF;
}


/*<---------------------------------footer--------------------------------------------->*/
footer {
    height: 7.982969664vw;
    width: 100%;
    background-color: #101012;
    overflow: hidden;
    clear: both;
    justify-content: center;
}

footer li a {
    text-decoration: none;
    color: #A092E5;
    transition: color 0.4s, font-size 0.4s;
    font-size: 1.064395955vw;
}

footer li a:hover {
    color: #B2B0FF;
    font-size: 1.064395955vw;
}

footer ul {
    list-style: none;
    margin-left: 10.643959553vw;
    margin-top: 3.193187865vw;
    padding: 0;
    display: flex;
    gap: 2.12879191vw;
    align-items: center;
}

footer ul li {
    padding: 0 0.532197977vw; 
    width: auto; 
}

footer #insta {
    width: 4.52368281vw;
    float: right;
    margin-top: -5.055880787vw;
    margin-right: 7.982969664vw;
}

footer #facebook {
    width: 2.12879191vw;
    margin-top: -3.193187865vw;
    margin-right: 3.991484832vw;
    float: right;
}

footer #x {
    width: 2.12879191vw;
    float: right;
    margin-top: -2.927088877vw;
    margin-right: 11.974454497vw;
}