html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    position: relative;
    background-color: #f0f0f0;
    display: block;
}

.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

.video-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70vw;
    height: calc(70vw * (677 / 1300));
    max-width: 1300px;
    max-height: 677px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.love-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70vw;
    height: calc(70vw * (911 / 1300));
    max-width: 1300px;
    max-height: 911px;
    background-image: url('steelbluetext.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Hide mobile content on larger screens */

.mobile-content {
    display: none;
}

.mobile-second-content {
    display: none;
}

/* Mobile-specific styles */

@media (max-width: 768px) {
    .video-container {
        display: none; /* Hide the desktop video on mobile */
    }

    .love-container {
        display: none; /* Hide the desktop video on mobile */
    }


    .mobile-content {
        display: block;
        position: relative;
        top: 100px; /* Top margin */
        margin: 0 4%; /* 4% margin for left and right */
        width: 92%; /* Width adjusted for 4% margin on each side */
        height: auto; /* Initial height set to auto */
        border: 0px solid #000; /* Optional border */
 
        z-index: 2;
    }


    .mobile-content iframe {
        width: 100%; /* Full width of the container */
        height: calc(92vw * (677 / 1300)); /* Height based on aspect ratio */
        border: none;
    }


    .mobile-second-content {
        display: block;
        position: absolute;
        top: 65px; /* Same top position as .mobile-content */
        margin-left: 4%; /* Left margin */
        margin-right: 4%; /* Right margin */
        width: 92%; /* Adjusted width */
        height: calc(92vw * (677 / 1300) * 1.3); /* 30% taller than .mobile-content */
        background-image: url('steelbluetext_small.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 1; /* Lower z-index to be behind */
    }
}