@import './theme-bs.css';

.attribution {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(60, 60, 60, 0.8); /* Semi-transparent background */
    color: white;
    text-align: center;
    padding: 6px;
    font-size: 10px;
    z-index: -1;
}

/* Base background - fallback for no-JS or before script loads */
.site-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Static background image classes - set once on page load via JavaScript */
/* Mobile portrait (< 768px) - optimized for 2x-3x retina displays */
.site-bg.bg-mobile-port {
    background-image: url('../assets/img/Denver_skyline_1024_port.jpg');
}

/* Tablet/Small Desktop landscape (768-1365px) */
.site-bg.bg-tablet-land {
    background-image: url('../assets/img/Denver_skyline_1024.jpg');
}

/* Tablet/Small Desktop portrait (768-1365px) */
.site-bg.bg-tablet-port {
    background-image: url('../assets/img/Denver_skyline_1024_port.jpg');
}

/* Desktop (1366-1919px) */
.site-bg.bg-desktop {
    background-image: url('../assets/img/Denver_skyline_1920.jpg');
}

/* Large Desktop (1920-2559px) */
.site-bg.bg-desktop-lg {
    background-image: url('../assets/img/Denver_skyline_2560.jpg');
}

/* Ultra-wide/4K (2560+px) */
.site-bg.bg-desktop-xl {
    background-image: url('../assets/img/Denver_skyline_3200.jpg');
}

/* Responsive font size only - doesn't affect background */
@media (min-width: 768px) and (orientation: landscape) {
    html {
        font-size: 16px;
    }
}