实现互相交叠的圆形随着浏览器缩放而缩放

HTML如下：

            <div class="all">
                <div class="circle circle4FB5B8">
                </div>
                <div class="circle circleDC5358">
                </div>
                <div class="circle circleEF7F01">
                </div>
                <div class="circle circle00AFDD">
                </div>
            </div>

CSS如下：

            .circle {
                position: absolute;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
            }
            .all {
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background: rgba(247, 241, 234, 1);
                width: 80%;
                margin: 0 auto;
            }

            .all .circle4FB5B8 {
                left: 0;
                top: 0;
                z-index: 1;
                width: 30%;
                padding-top: 30%;
                background: rgba(79, 181, 184, 0.8);
            }

            .all .circleDC5358 {
                left: 0;
                top: 0;
                margin-left: 25%;
                z-index: 2;
                width: 30%;
                padding-top: 30%;
                background: rgba(220, 83, 88, 0.8);
            }

            .all .circleEF7F01 {
                left: 0;
                top: 0;
                margin-left: 50%;
                z-index: 3;
                width: 30%;
                padding-top: 30%;
                background: rgba(239, 127, 1, 0.8);
            }

            .all .circle00AFDD {
                left: 0;
                top: 0;
                margin-left: 75%;
                z-index: 4;
                width: 30%;
                padding-top: 30%;
                background: rgba(0, 175, 221, 0.8);
            }