/* Add a pseudo-element to the body for the background image with blue lines */
body::after {
    content: "";
    position: fixed;
    /* Fixed position to cover the viewport and stay in place on scroll */
    top: 50%;
    /* Start at the middle of the screen */
    right: 0;
    /* Align to the right */
    bottom: 0;

    width: 40vw;
    /* 20% of the viewport width */
    height: 250vh;
    /* 100% of the viewport height */

    z-index: -1;
    /* Ensures it's behind all other content */
    background: url('/assets/images/heroImages/quasarHeroImage.png') no-repeat center center;
    transform: translateY(-50%);
    /* Shifts the image up by half its own height to center it */
    background-size: contain;
    /* Cover the pseudo-element area completely */


}


/* Adjust main content for mobile */
@media screen and (max-width: 800px) {


    body::after {
        width: 25vw;
        /* Adjust the width for smaller screens */
        background-size: contain;
        display: none;
        content: none;
    }


}