.background-radial {
    background: radial-gradient(circle, rgb(35, 106, 213, 0.4) 0%, rgb(15, 15, 15, 0) 69%);
    width: 1000px;
    height: 1000px;
    animation: background-radial-pulse 10s ease-in-out infinite;
    position: absolute;
}

@keyframes background-radial-pulse {
    0% {
        width: 1000px;
        height: 1000px;
        margin-left: 0px;
        margin-top: 0px;
    }
    50% {
        width: 750px;
        height: 750px;
        margin-left: 125px;
        margin-top: 125px;
    }
}

.webscroll {
    position: fixed;
    transform: translate(calc(100dvw - 1000px), -500px);
    margin-left: 0px;
    transition: transform 2s ease-out;
    /* animation: webscroll 10s ease-in-out infinite; */
}



.webscroll-inverted {
    position: fixed;
    transform: translate(0px, calc(100dvh - 500px));
    margin-left: 0px;
    transition: transform 2s ease-out;
    /*animation: webscroll-inverted 10s ease-in-out infinite;*/
}

/*
@keyframes webscroll {
    0% {
        width: 1000px;
        height: 1000px;
        margin-left: 0px;
        margin-top: 0px;
    }
    50% {
        width: 750px;
        height: 750px;
        margin-left: 125px;
        margin-top: calc(100vh + 125px);
    }
}

@keyframes webscroll-inverted {
    0% {
        width: 1000px;
        height: 1000px;
        margin-left: 0px;
        margin-top: 0px;
    }
    50% {
        width: 750px;
        height: 750px;
        margin-left: 125px;
        margin-top: calc(-100vh + 125px);
    }
}
*/

.background-radial-webscroll-inverted {
    background: radial-gradient(circle, #23a6d5 0%, #0f0f0f 20%);
    position: fixed;
    transform: translate(25%, -25%);
    mask-composite: intersect;
}

.background {
    mask-composite: intersect;
}