body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 50px 0;   
    overflow: hidden;  
    display: flex;
    flex-direction: column;  
    justify-content: center; 
    height: 100vh;  
    box-sizing: border-box; 
    background-color: #fff;
}

.gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: 100%;
    flex-direction: column;
    box-sizing: border-box;
}

.gallery img {
    max-width: 100%;
    height: 100vh;
}

.large {
    display: block;  
    margin-top: 50px; 
    margin-bottom: 50px; 
}

.mobile {
    display: none;  
    max-width: 100%;
    height: auto;   
}

@media (max-width: 600px) {
    .large {
        display: none; 
    }
    .mobile {
        display: block; 
        max-width: 10%; 
        height: auto;    
    }
    .social-button {
        bottom: 190px;  
        right: 5px;
    }
}


.social-button {
    position: fixed;           
    background: none;          
    cursor: pointer;           
    z-index: 1000;             
    width: auto;
    height: auto;
    border: 0;
 
}

.button-large {
    display: block; 
}

.button-mobile {
    display: none;  
}

@media (max-width: 600px) {
    .button-large {
        display: none;  
    }
    .button-mobile {
        display: block;  
    }

    .social-button {
        right: 0;
        width: 84%;
        bottom: 140px;
    }
}

@media (min-width: 600px) and (max-width: 900px) {
    .social-button {
        bottom: 0px;             
        right: 0; 
    }
}

@media (min-width: 900px) and  (max-width: 1400px) {
    .social-button {
        bottom: -15px;             
        right: 0px; 
    }
}

@media (min-width: 1400px) and (max-width: 1670px){
    .social-button {
        bottom: -15px;             
        right: 0px; 
    }
}

@media (min-width: 1670px){
    .social-button {
        bottom: -15px;             
        right: 180px; 
    }
}