html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    overflow-x: hidden;
}

/* Fixed background */
.background {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background: #FCFDFD;

    z-index: -1;
    pointer-events: none;
}

/* Your animated blobs */
.background span {
    position: absolute;

    width: 70vmin;
    height: 70vmin;

    border-radius: 50%;

    background: currentColor;

    filter: blur(10vmin);

    opacity: 0.9;

    animation: move 15s linear infinite;

    will-change: transform;
}

.background span:nth-child(1) {
    color: #E3F1FF;

    top: 95%;
    left: 58%;

    animation-duration: 14.6s;
    animation-delay: -14.4s;

    transform-origin: -17vw -12vh;
}

.background span:nth-child(2) {
    color: #ffffec;

    top: 29%;
    left: 12%;

    animation-duration: 10.5s;
    animation-delay: -12.2s;

    transform-origin: -9vw 7vh;
}

.background span:nth-child(3) {
    color: #ffeaf7;

    top: 22%;
    left: 62%;

    animation-duration: 13.8s;
    animation-delay: -10.1s;

    transform-origin: -16vw 16vh;
}

.background span:nth-child(4) {
    color: #F7FCF5;

    top: 65%;
    left: 70%;

    animation-duration: 18s;
    animation-delay: -8s;

    transform-origin: 10vw -15vh;
}

@keyframes move {
    100% {
        transform: rotate(360deg);
    }
}