html body {
    height: 100px !important;
    overflow: hidden;
    background: #e1def1;
}

.circle1 {
    background: #b0a8e1;
    border-radius: 100%;
    width: 500px;
    height: 500px;
    top: -30%;
    left: -10%;
    position: absolute;
}

.circle2 {
    background: #8371ef;
    border-radius: 100%;
    width: 500px;
    height: 500px;
    top: -40%;
    left: -13%;
    position: absolute;
}

.circle3 {
    background: #5840eb;
    border-radius: 100%;
    width: 500px;
    height: 500px;
    top: -50%;
    left: -15%;
    position: absolute;
}

.circle4 {
    background: #b0a8e1;
    border-radius: 100%;
    width: 500px;
    height: 500px;
    bottom: -30%;
    right: -10%;
    position: absolute;
    z-index: 1;
}

.circle5 {
    background: #8371ef;
    border-radius: 100%;
    width: 500px;
    height: 500px;
    bottom: -40%;
    right: -13%;
    position: absolute;
    z-index: 1;
}

.circle6 {
    background: #5840eb;
    border-radius: 100%;
    width: 500px;
    height: 500px;
    bottom: -50%;
    right: -15%;
    position: absolute;
    z-index: 1;
}

.cards {
    z-index: 2;
    background: rgb(244,210,225);
    background: radial-gradient(circle, rgba(244,210,225,1) 0%, rgba(198,216,237,1) 100%);
}

.subcard {
    z-index: 2;
    background: white !important;
    height: 100%;
    box-shadow: rgb(176 168 225) 1px 1px 3px 0px;
    position: relative;
}

.circle7 {
    background: #5840eb;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    bottom: -50%;
    right: -15%;
    position: absolute;
    z-index: 1;
}

.footer-1 {
    background: radial-gradient(circle, #5d47e9 0%, #5d47e9 100%);
    padding: 0px;
    height: 30px;
    position: absolute;
    width: 100%;
    bottom: 0px;
    z-index: 0;
}

.red {
    color: red;
}