/* Reset & Base */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
    /* White background for the frame effect */
    /* Font fallback */
    font-family: serif;
    /* Center the container */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container locking Aspect Ratio */
.container {
    position: relative;
    /* Aspect ratio of the original image */
    aspect-ratio: 2954 / 1630;

    /* Logic to fit in viewport without cropping */
    width: 100%;
    height: auto;
    max-height: 100vh;
    max-width: 100vw;
}

/* Constrain by height if screen is too wide */
@media (min-aspect-ratio: 2954/1630) {
    .container {
        height: 100vh;
        width: auto;
    }
}

.background-image {
    width: 100%;
    height: 100%;
    display: block;
    /* Use contain to ensure the whole image is visible within the frame */
    object-fit: contain;
}

/* Shared Typography for Text Links */
.text-link {
    position: absolute;
    z-index: 10;
    color: #333;
    opacity: 0;
    /* Make invisible but clickable */
    font-family: 'Playfair Display', serif;
    font-size: 1.1vw;
    /* Responsive font size relative to width */
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    white-space: nowrap;
}

.text-link:hover {
    text-decoration: underline;
}

/* Specific Positions - Based on Screenshot locations (Corners) */

/* Email: Top Left Corner */
.email-link {
    top: 8.2%;
    left: 9%;
    transform: none;
}

/* Address: Bottom Right Corner */
.address-link {
    bottom: 6%;
    right: 8.3%;
}

/* Instagram Link: Top Right Corner */
.instagram-link {
    position: absolute;
    z-index: 10;
    transition: transform 0.2s ease-in-out;
    top: 7.5%;
    right: 7.9%;
}

.instagram-link:hover {
    transform: scale(1.1);
}

.instagram-link img {
    display: block;
    width: 1.98vw;
    /* Responsive size */
    height: auto;
}

/* Increase clickable area using pseudo-element */
.text-link::after,
.instagram-link::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    bottom: -20px;
    left: -20px;
    cursor: pointer;
}