@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');

body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(to right, #6f12e9, #c471ed, #f64f59);
    background: #6656cf;
    font-family: 'Montserrat', sans-serif;
}

.c {
    position: relative;
}

.text-c {
    display: grid;
    place-items: center;
}

.drop {
    position: absolute;
    height: 200px;
    width: 200px;
    background: #6a54fb;
    border-radius: 51% 49% 48% 52% / 62% 44% 56% 38%;
    opacity: 0.8;
    border: 2px solid #643dff;
}

.drop::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background: #6131fe;
    border-radius: 51% 49% 48% 52% / 62% 44% 56% 38%;
    box-shadow:
        -20px 30px 16px #7026fb,
        -40px 60px 32px #753cef,
        inset -6px 6px 10px #691bfb,
        inset 2px 6px 10px #611ae5,
        inset 20px -20px 22px white,
        inset 40px -40px 44px #b2a8ff;
}

.drop::after {
    content: '';
    position: absolute;
    height: 40px;
    width: 40px;
    background: #e6fdfb;
    border-radius: 44% 56% 46% 54% / 36% 50% 50% 64%;
    left: 130px;
    top: 40px;
    box-shadow: 16px 40px 0 -10px white;
    opacity: 0.8;
}

.drop1 {
    left: -100px;
    top: -50px;
}

.drop2 {
    right: -100px;
    bottom: -50px;
    z-index: -1;
    border-radius: 46% 50% 39% 54% / 56% 57% 50% 50%;
}

.drop2::before {
    border-radius: 46% 50% 39% 54% / 56% 57% 50% 50%;
}

h1 {
    font-size: 72px;
    color: white;
    line-height: 0;

}

p {
    line-height: 0;
    color: white;
    font-size: 20px;
}