img{
    display: none;
    border:3px solid #000;
    width: 100%;       
}
h1 {
    color: darkgray;    
}
#overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8); /* Change the background color to a darker shade */
    z-index: 2;
    cursor: pointer;
}

#overlayImage {
    position: absolute;
    object-fit: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; /* Limit the width of the image */
    height: 80%; /* Limit the height of the image */
    border: none;
    
}
.bi-box-arrow-down {
    color: #fff;
    position: relative;
    top: 30%;
}
.bi-box-arrow-down:hover {
    color: #ff0000;
}