/* Make safari all black as mp4 will have black background (webm with transparency does not work on IOS) */
@supports (-webkit-touch-callout: none) {

    #menuContainer,
    #expandMenu,
    #menu {
        /* background: linear-gradient(110deg, rgb(45, 8, 29), rgb(14, 26, 37), rgb(15, 32, 39)) !important; */
        margin-bottom: 0px !important;
        background: linear-gradient(45deg,
                rgb(75, 34, 57),
                rgb(29, 83, 104)) border-box !important;
        max-width: 100vw;
    }


    /* Then re-apply the filter */
    .sectionContainer,
    .section,
    .projectsContainer,
    .projectTitle,
    .sectionText,
    .project,
    .video,
    .explanation,
    .imgAndText {
        border: none !important;
    }

    /* Pseudo element creates curved gradient border */
    .sectionTitle::before,
    .explanation::before,
    .imgAndText::after,
    .workflowtext h4::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 10px;
        /*1*/
        border: 2px solid transparent;
        /*2*/
        background: linear-gradient(45deg,
                rgb(133, 53, 99),
                rgb(44, 128, 161)) border-box;
        /*3*/
        -webkit-mask:
            /*4*/
            linear-gradient(#fff 0 0) padding-box,
            linear-gradient(#fff 0 0);
        /* -webkit-mask-composite: xor; */
        -webkit-mask-composite: source-out;
        /*5'*/
        mask-composite: exclude;
        pointer-events: none;
        /*5*/
    }


    /* change curved gradient border */
    .explanation::before {

        border-radius: 20px !important;
        border-width: 2px;

    }


    /* No side gradient borders on mobile */
    @media (max-device-aspect-ratio: 5/8) {

        .sectionText::before,
        .explanation::before,
        .imgAndText::after,
        .workflowtext h4::after {
            border-radius: 0px !important;
            border: none;
            border-top: 2px solid transparent;
            border-bottom: 2px solid transparent;
        }
    }

    .workflowtext h4::after {
        border-left: 0px;
        border-right: 0px;
        border-radius: 0px;
    }

    .imgAndText::after {
        border-radius: 50px !important;
    }

    /* Image background doesn't work well on IOS 
and with black video bg, dark gre looks better */
    .projectsContainer,
    .project,
    .projectTitle,
    .scroll-bound,
    .content,
    .projectFooter,
    body,
    #project,
    #projectsContainer,
    .project,
    #mainarea,
    .section,
    video,
    .wipe {
        background: rgb(9, 12, 14) !important;
    }

    .imgAndText,
    .sectionText,
    .sectionTitle {
        background: rgb(12, 17, 24) !important;
    }

    .explanation {
        background: rgb(8, 14, 16);
    }


    .projectTitle {
        border-radius: 0px;
    }

    /* Video bg is black on IOS, this simulates what it will look like */
    video {
        background-color: black !important;
        box-shadow: 0px 0px 50px 30px black;
        scale: 1;
    }
}