*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{

    font-family: 'Lato', sans-serif;
}

.header{
    width:90%;
    min-height: 300px;
    background-color: rgba(255,255,255,0.7);
    margin: 20px auto 0px auto;
    text-align:center;
    padding-top:100px;
    padding-bottom:20px;
    border-radius:10px 10px 0 0;
    border-bottom:2px solid black;
}


.header > a > img{
    border-radius: 10px;
    box-shadow:0px 10px 10px rgba(15, 104, 220, 0.315);
}

.blok1{
    width:90%;
    min-height: 500px;
    background-color: rgba(15, 104, 220, 0.315);
    margin: 0px auto;
    text-align:center;
    padding:40px;

}
 



.galeria{
    width:80%;
    min-height: 500px;
    margin: 20px auto;
    display:flex;
    flex-wrap: wrap;
    gap: 10px; 
    justify-content:center;
    align-items: center;
    
}

.galeria >a{
    text-decoration: none;
    color:black;
    display:flex;
    flex: 1 1 150px; /* elastyczna szerokość, minimum 200px */
    max-height: 250px; /* max wysokość */
    object-fit: cover;
}

.galeria > a > img{
    flex: 1 1 150px; /* elastyczna szerokość, minimum 200px */
    max-height: 250px; /* max wysokość */
    object-fit: cover;
    border: 2px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 5px;
    transition: ease 1s;
    

}

.galeria >a> img:hover{
    transform:scale(0.9);
    transition: ease 1s;
}




.rok{
    display:inline-block;
    width:350px;
    min-height:150px;
    background-color:rgba(255,255,255,0.7); 
    margin:20px 10px;
    text-align:center;
    font-size:small;
    font-weight: bold;
    padding:20px;
    border-radius:5px;
    text-decoration: none;
    color:	#404040;
    transition: ease 1s;
     
}

.rok:hover{
    border-color: black;
    color: black;
    transform:scale(1.05);
    transition: ease 1s;

}


.rok > img{
    width:20%;
}

.footer{
    width:90%;
    min-height: 100px;
    background-color: rgba(255,255,255,0.7);
    margin: 0px auto 20px auto;
    text-align:center;
    padding-top:20px;
    padding-bottom:20px;
    border-top:2px solid black;
    border-radius: 0 0  10px 10px;

}

i{
    font-size:30px;
}

.button{

    display:block;
    width:50px;
    min-height:50px;
    background-color:rgba(255,255,255,0.2); 
    text-align:center;
    padding-top:5px;
    border-radius:10px;
    text-decoration: none;
    font-size:20px !important;
    border:2px solid black;
    color:black;
   
}

.button:hover{
    cursor:pointer;
    background-color:rgba(255,255,255,0.6);
}

#bt1{
    position:fixed;
    top:10px;
    right:10px;

}


#bt2{
    position:fixed;
    bottom:10px;
    right:10px;

}

.socialmedia{
    display:inline-block;
    width:50px;
    min-height:50px;
    background-color:rgba(255,255,255,0.2); 
    text-align:center;
    padding-top:6px;
    border-radius:10px;
    text-decoration: none;
    font-size:20px !important;
    border:2px solid black;
    color:black;

}

.socialmedia:hover{

    background-color:rgba(255,255,255,0.6); 
    cursor:pointer;

}


.socialmedia > a > i{

    color:black;
}

.info{
    margin-top: 20px;
    font-weight: bold;
}

.info > a{
   
    color:black;
    
}


@media screen and (max-width:500px) {

    .rok{
        display:block;
        width:80%;
        height:80px;
        margin-left:auto;
        margin-right: auto;
    }


    .blok1 >a> img{
        width: 100%;
        height: auto;
    }

    img{
        width: 100%;
        height: auto;
    }

    .button{
        display:none;
    }

    #bt2{
        
        visibility:hidden;
    }

}