/* Default Landscape Styles (No change needed if already set up) */
html, body {
    margin: 0;
    padding: 0;
    background-color: #000000;
    background-image: url('public_html/starfield.jpg');
    background-repeat: repeat;              /* Tiles the image seamlessly */
    background-position: center;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

img {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
    scroll-snap-align: start;
}

/* PORTRAIT OVERRIDE: Force rotation */
@media (orientation: portrait) {
    html, body {
        /* Rotate the entire page 90 degrees */
        transform: rotate(-90deg);
        transform-origin: left top;
        
        /* Swap width/height to fill the rotated screen */
        width: 100vh;
        height: 100vw;
        
        /* Reposition to fit the viewport after rotation */
        position: absolute;
        top: 100%;
        left: 0;
        
        /* Ensure scrolling still works in the new orientation */
        overflow-x: hidden; 
        overflow-y: scroll; 
        /* Snap must be re-applied or adjusted for the rotated axis if needed */
        scroll-snap-type: y mandatory; 
    }

    img {
        /* Ensure images still fill the rotated viewport */
        width: 100vw; 
        height: 100vh;
    }
}