.mainContainer {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 100dvh; /*Not this is to fix issues with iphone bottom nav bar*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url('../Images/mainBackground.svg');
    background-size: cover;
}

.video-container {
    width: 90%; /* Container scales to fit its parent width */
    max-width: 800px; /* Prevents it from becoming awkwardly huge */
    margin: 0 auto; /* Centers it */
    aspect-ratio: 16 / 9; /* Standard widescreen ratio */
    background: #000; /* Black bars if the video doesn't perfectly fit */
}

    .video-container video {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain; /* Ensures the whole video is visible inside the div */
    }

.backBtn {
    margin-left: 5dvw;
    margin-top: 5dvw;
}