/* 1. HTML/Body Reset */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh; 
    overflow-x: hidden;
    overflow-y: auto;
    background-color: black; 
}

/* 2. Image Container (The new reference point) */
.image-container {
    /* KEY FIX: This makes the container the reference for absolute positioning */
    position: relative;
    /* Ensure the container is as wide as the body and its height fits the image */
    width: 100%;
    height: auto;
}

/* 3. Main Image */
.full-screen-image {
    /* The image now lives inside the container */
    width: 100%;
    height: auto; 
    /* Static is fine, but display: block is important for proper sizing */
    display: block;
}

/* 4. Overlay Links (General) */
.overlay-link {
    /* These are now positioned relative to the .image-container */
    position: absolute;
    width: 28%;
    z-index: 10;
    left: 37%; /* Center-ish positioning */
}

/* 5. Style the Image within the Link */
.overlay-link img {
    /* No change needed here */
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

/* 6. Specific Positioning for Each Overlay */

/* Position Overlay 1: 25% from the bottom of the main image */
.overlay-1 {
    bottom: 22%;
}

/* Position Overlay 2: 15% from the bottom of the main image */
.overlay-2 {
    bottom: 10%;
}

.overlay-return {
    bottom: -1%;
}