body {
    margin: 0;
    overflow-x: hidden; /* Prevent horizontal scrollbar on mobile if elements slightly exceed width */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #000;
}

.banner-container {
    position: relative;
    /* Base styles for larger screens (desktop/tablet) */
    width: 1960px; /* Original width, will be overridden for smaller screens */
    height: 629px; /* Original height, will be overridden for smaller screens */
    max-width: 100%; /* Ensures it doesn't overflow very large screens */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the container without distortion */
    opacity: 0;
    transition: opacity 2s ease-in-out;
    z-index: 1;
}

.banner-image.fade-in {
    opacity: 1;
}

.overlay-text-wrapper {
    position: relative;
    z-index: 2;
    display: inline-block;
    text-align: center;
    /* Adjust position relative to the banner. Values might need fine-tuning based on your image */
    top: 0;
    left: 0;
}

.overlay-text {
    font-family: 'Dancing Script', cursive;
    font-size: 8em; /* Default for larger screens */
    color: #fff;
    white-space: nowrap; /* Crucial: Prevents text from wrapping */
    display: inline-block;
    text-shadow:
        0 0 10px rgba(128, 0, 128, 0.8),
        0 0 20px rgba(128, 0, 128, 0.8),
        0 0 30px rgba(128, 0, 128, 0.8),
        0 0 40px rgba(128, 0, 128, 0.6),
        0 0 70px rgba(128, 0, 128, 0.4);
    opacity: 0;
}

.cursor {
    display: inline-block;
    font-family: monospace;
    font-size: 8em; /* Default for larger screens */
    color: #fff;
    margin-left: -5px;
    vertical-align: middle;
    opacity: 0;
    animation: blinkCursor 0.7s infinite steps(1);
    text-shadow:
        0 0 5px rgba(128, 0, 128, 0.8),
        0 0 10px rgba(128, 0, 128, 0.8);
}

@keyframes blinkCursor {
    50% { opacity: 0; }
}

.skip-rsvp {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 0;
}

.skip-rsvp a {
    color: #fff;
    text-decoration: none;
    font-size: 1.5em; /* Default for larger screens */
    padding: 10px 20px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s ease;
    font-family: 'Permanent Marker', cursive;
}

.skip-rsvp a:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* ========================================= */
/* Responsive Styles for Mobile        */
/* ========================================= */

@media (max-width: 768px) {
    .banner-container {
        width: 95vw; /* Make banner take 95% of viewport width */
        height: auto; /* Allow height to adjust proportionally */
        /* To maintain aspect ratio for image, you can use padding-bottom trick */
        /* For 1960x629, ratio is (629 / 1960) * 100 = ~32.09% */
        padding-bottom: 32.09%; /* This creates a box with the correct aspect ratio */
        box-sizing: border-box; /* Include padding in the width/height */
    }

    /* Make the image fill the new aspect-ratio container */
    .banner-image {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .overlay-text {
        font-size: 8vw; /* Scale font size with viewport width */
        /* You might need to adjust this value (e.g., 6vw, 10vw)
           to ensure the text fits without wrapping on various phone sizes.
           Test on different devices/emulators! */
    }

    .cursor {
        font-size: 8vw; /* Match cursor size to text */
        margin-left: -2px; /* Adjust cursor spacing for smaller fonts */
    }

    .skip-rsvp {
        bottom: 10px; /* Move skip link up slightly on smaller screens */
    }

    .skip-rsvp a {
        font-size: 1em; /* Smaller font for skip link on mobile */
        padding: 8px 15px;
    }
}

/* Optional: Further adjustments for very small screens if 768px isn't enough */
@media (max-width: 480px) {
    .overlay-text {
        font-size: 9vw; /* Slightly larger text on very small screens, or adjust to fit */
    }
    .cursor {
        font-size: 9vw;
    }
}