body, html {
    height: 100%;
    width: auto;
    margin: 0;
    overflow: hidden;
    
}

#contact-info {
    position: absolute;
    z-index: 1; 
    color: #fffbfb;
    text-align: center; 
    font-size: 30px;
    font-family: Arial, sans-serif; 
    text-shadow: 2px 2px 4px #000000; 
    left: 50%;
    top: 10%;
    transform: translate(-50%, -50%);
}

#slideshow {
    position: relative;
    height: 100%;
}

.slide {
    position: absolute;
    opacity: 0;
    transition: opacity 2s;
}

.slide img {
    object-fit: fill;
}

/* Styles for portrait mode */
@media (orientation: portrait) {
    .slide {
        width: auto;
        height: 100%;
    }
    .slide img {
        width: auto;
        height: 100%;
    }
}

/* Styles for landscape mode */
@media (orientation: landscape) {
    .slide {
        width: 100%;
        height: auto;
    }
    .slide img {
        width: 100%;
        height: auto;
    }
}

.fade {
    opacity: 1;
}