/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    scroll-behavior: smooth;
}

body {
    overflow-y: auto;
    scroll-snap-type: y mandatory;
}

.slides {
    width: 100vw;
    height: 100%;
}

.slide {
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
	display: flex;
}

.D {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden ;
    background-color: black; /* Black bars */
    display: flex;
    align-items: center;
    justify-content: center;
	font-size: 0; /* Prevent font-size from affecting spacing */
    line-height: 0; /* Prevent line-height from affecting spacing */
}

/* Center Image C */
.C {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* Initially hide T, B, L, R */
.T, .B, .L, .R {
    position: absolute;
    display: none;
}

/* Base styles for T and B */
.T, .B {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

/* Base styles for L and R */
.L, .R {
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
}

/* Assume the aspect ratio of image C is 16:9 */
/* Adjust the aspect ratio according to your image C's actual aspect ratio */
@media (max-aspect-ratio: 16/9) {
    /* Viewport is taller (narrower) than image C */
    /* Show Top and Bottom images */
    .T, .B {
        display: block;
    }
    /* Hide Left and Right images */
    .L, .R {
        display: none;
    }
    /* Center Image C adjustments */
    .C {
        width: 100%;
        height: auto;
    }
    /* Position Top Image T */
    .T {
        bottom: calc(50% + ((100vw / (16 / 9)) / 2));
    }
    /* Position Bottom Image B */
    .B {
        top: calc((50% + ((100vw / (16 / 9)) / 2)));
    }
}

@media (max-aspect-ratio: 1920/1590) {
    /* Adjust the .D container */
    .D {
        display: flex;
        flex-direction: column; /* Stack children vertically */
        align-items: center;    /* Center items horizontally */
        height: auto;           /* Height adjusts based on content */
        overflow: visible;      /* Ensure overflow is visible */
        background-color: transparent; /* Optional: Adjust background if needed */
    }

    /* Show .T and .B, hide .L and .R */
    .T, .B {
        display: block;         /* Show Top and Bottom elements */
        position: relative;     /* Remove absolute positioning */
        width: 100%;            /* Full width */
        left: auto;             /* Reset left positioning */
        transform: none;        /* Reset any transforms */
        margin: 0;              /* Remove margins */
    }

    .L, .R {
        display: none;          /* Hide Left and Right elements */
    }

    /* Adjust the .C (Center Image) */
    .C {
        width: 100%;            /* Full width */
        height: auto;           /* Auto height to maintain aspect ratio */
        display: block;
        margin: 0;              /* Remove margins */
    }

    /* Reset styles that may interfere */
    .T, .B, .C {
        top: auto;
        bottom: auto;
        right: auto;
    }

    /* Remove any padding or borders from images */
    img {
        display: block;
        width: 100%;            /* Ensure images fill their containers */
        height: auto;
        margin: 0;
        padding: 0;
        border: none;
    }
	
	.slide{
		height:auto;
	}
}


@media (min-aspect-ratio: 16/9) {
    /* Viewport is wider than image C */
    /* Show Left and Right images */
    .L, .R {
        display: block;
    }
    /* Hide Top and Bottom images */
    .T, .B {
        display: none;
    }
    /* Center Image C adjustments */
    .C {
        height: 100%;
        width: auto;
    }
    /* Position Left Image L */
    .L {
        right: calc(50% + ((100vh * (16 / 9)) / 2));
    }
    /* Position Right Image R */
    .R {
        left: calc(50% + ((100vh * (16 / 9)) / 2));
    }
}

/* Remove any default borders */
img {
    display: block; /* Make images block-level elements */
    margin: 0;
    padding: 0;
    border: none;
}










/* Style for the overlay message */
#orientation-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.5);
    color: black;
    padding: 20px;
    border-radius: 10px;
    font-size: 18px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out;
    z-index: 9999;
	font-family: sans-serif;
}

/* When the message is visible */
#orientation-message.show {
    opacity: 1;
    visibility: visible;
}

/* Fade out animation */
#orientation-message.hide {
    opacity: 0;
    visibility: hidden;
}