:root {
    --text-color: #f2f2f2; /* Text color for captions */
    --border-color: white; /* Border color for logos */
}

/* Ensure consistent box sizing */
* {
    box-sizing: border-box; /* Ensure padding and border are included in element's total width and height */
}

/* Prevent scrollbars and maintain fixed width */
body {
    overflow: hidden; /* Hide scrollbars */
    margin: 0; /* Remove default margin */
    max-width: 100vw;
}

/* Hide slides by default */
.mySlides {
    display: none;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Container for slideshow picture content */
.slideshow-container {
    position: fixed;
    top: var(--ticker-height);
    width: 100vw;
    height: calc(100vh - var(--ticker-height)); /* Account for ticker and finance bars */
    overflow: hidden;
}

/* Caption text and Number text */
.text, .numbertext {
    color: var(--text-color); 
    padding: 8px 12px; 
    position: absolute; 
}

.text {
    font-size: clamp(0.875rem, 2vw, 1.2rem);
    bottom: 8px; 
    width: 100%; 
    text-align: center; 
}

.numbertext {
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    top: 60px;
    right: 16px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
}

/* Fading animation */
.fade {
    animation: fade 1.5s; /* Apply fade animation */
}

@keyframes fade {
    from {opacity: .4} /* Start with 40% opacity */
    to {opacity: 1} /* End with full opacity */
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .text {font-size: 0.6875rem;} 
}

/* Override slideshow image styles for logos */
img.titlelogo, img.logo {
    position: fixed;
    bottom: 20px;
    height: auto;
}

img.titlelogo {
    left: 20px;
    width: min(30%, 335px);
    z-index: 2;
    border: 1px solid var(--border-color);
    border-radius: 15px; /* Match weather container's rounded corners */
}

img.logo {
    right: 20px;
    width: min(10%, 80px);
}

@media screen and (max-width: 768px) {
    img.titlelogo {
        width: 40%;
    }
    
    img.logo {
        width: 15%;
    }
}