.canvas {
    /*position: relative;
    width: auto;
    height: auto;
    margin: auto;
    background: linear-gradient( -90deg, #e3e5e8 0%, #ebe4e3 10%, #e4e1e0 25%, #e5cee9 45%, #e1b2db 60%, #e5a2d4 75%, #e282bb 85%, #e8398e 100% );*/
    z-index: -1;
    position: relative;
}

    .canvas::before,
    .canvas::after,
    .canvas > .circles,
    .canvas > .circles::before,
    .canvas > .circles::after {
        filter: blur(75px);
    }

    .canvas::before,
    .canvas::after {
        position: fixed;
        content: "";
        width: 390px;
        height: 390px;
        border-radius: 100%;
    }

    .canvas::before {
        background: #ffecf5;
        top: -195px;
        left: -195px;
    }

    .canvas::after {
        /*background: #86e1ef;
        right: -195px;*/
        background: #cae4ff;
        right: -30px;
        top: 50%;
        transform: translateY(-50%);
    }

    .canvas > .circles,
    .canvas > .circles::before,
    .canvas > .circles::after {
        border-radius: 100%;
        position: fixed;
    }

        .canvas > .circles::before,
        .canvas > .circles::after {
            content: "";
            width: 140px;
            height: 140px;
            top: 50%;
            transform: translateY(-50%);
        }

    .canvas > .circles {
        width: 230px;
        height: 230px;
        background: #ffecb1;
        bottom: -60px;
        left: 75px;
    }

        .canvas > .circles::before {
            background: #8600ff;
            left: -40%;
        }

        .canvas > .circles::after {
            background: #ff8e8e;
            right: -20%;
        }