body {
    background-color: #E5E5E5;
}

.blob-orange {
    position: absolute;
    width: 600px;
    height: 600px;
    background-color: #FF5E3A;
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    filter: blur(0px);
    z-index: -1;
    top: 20%;
    left: -10%;
}

.blob-purple {
    position: absolute;
    width: 600px;
    height: 600px;
    background-color: #C8A2FF;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    z-index: -1;
    right: -10%;
    bottom: 20%;
}

.blur-stack {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    pointer-events: none;
}

.blur-stack>div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    -webkit-mask-image: -webkit-linear-gradient(top, black, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
    mask-image: linear-gradient(to bottom, black, transparent);
}

.blur-layer-1 {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 1;
    -webkit-mask-image: -webkit-linear-gradient(top, black 0%, black 25%, transparent 50%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 50%);
    mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 50%);
}

.blur-layer-2 {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 2;
    -webkit-mask-image: -webkit-linear-gradient(top, transparent 25%, black 50%, transparent 75%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 50%, transparent 75%);
    mask-image: linear-gradient(to bottom, transparent 25%, black 50%, transparent 75%);
}

.blur-layer-3 {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 3;
    -webkit-mask-image: -webkit-linear-gradient(top, transparent 50%, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 50%, black 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 50%, black 75%, transparent 100%);
}

.blur-layer-4 {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    z-index: 4;
    -webkit-mask-image: -webkit-linear-gradient(top, transparent 75%, black 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 75%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 75%, black 100%);
}

@supports not (backdrop-filter: blur(10px)) {
    .blur-stack {
        background-color: rgba(255, 255, 255, 0.8);
    }
}