.blobs-container {
    z-index: -100;
}

.blobs-container::after {
    display: flex;
    content: '';
    width: 100%;
    height: 100%;
/* FIX ME */
    background: url('./images/noise-test.png');
    background-size: 200px;
    mix-blend-mode: overlay;
    opacity: 10%;
/* FIX ME */

    position:fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
    z-index: -100;
}

.blobs {
    width:110vh;
    height: 110vh;
    display: block;
    position: absolute;
    top: 40%;
    left: 75%;
    transform: translate(-50%, -50%);
    /*filter: contrast(30);*/
}

.blob {
    width: 50%;
    height: 50%;
    border-radius: 100%;
    position: absolute;
    mix-blend-mode: lighten;
    filter: blur(80px);
    opacity: 70%;
}

.blob.a {
    width: 60%;
    height: 60%;
    background-color: #AB71F4;
    
    animation: clockwise 10s linear infinite;
}

.blob.b {
    background-color: #AB71F4;
    animation: counter-clockwise 60s linear infinite;
}

.blob.c {
    width: 50%;
    height: 50%;
    background-color: #244dd3;
    /*transform: translate(-25vh, 40vh);*/
    animation: diagonal-up 80s linear infinite;
}

.blob.d {
    width: 100%;
    height: 100%;
    background-color: #006786;
    animation: wibble 20s linear infinite;
}

.blob.e {
    width: 50%;
    height: 50%;
    background-color: #244dd3;
    animation: diagonal-down 40s linear infinite;
}


@keyframes diagonal-up {
    0% {
        transform: translate(-25vh, 40vh);
    }   
    25% {
        transform: translate(-15vh, 25vh);
    } 
    50% {
        transform: translate(-5vh, 10vh);
    }
    75% {
        transform: translate(-15vh, 25vh);
    }
    100% {
        transform: translate(-25vh, 40vh);
    }
}

@keyframes diagonal-down {
    0% {
        transform: translate(50vh, 10vh);
    }

    25% {
        transform: translate(40vh, 20vh);
    }

    50% {
        transform: translate(30vh, 30vh);
    }

    75% {
        transform: translate(40vh, 20vh);
    }

    100% {
        transform: translate(50vh, 10vh);
    }
}

@keyframes wibble {
    0% {
        transform: translate(0, 0);
    }   
    25% {
        transform: translate(10vh, 10vh);
    } 
    50% {
        transform: translate(0, 20vh);
    }
    75% {
        transform: translate(-10vh, 10vh);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes counter-clockwise {
    0% {
        transform: translate(5vh, 0);
    }

    25% {
        transform: translate(-15vh, 10vh);
    }

    50% {
        transform: translate(5vh, 20vh);
    }

    75% {
        transform: translate(20vh, 10vh);
    }

    100% {
        transform: translate(5vh, 0);
    }
}

@keyframes clockwise {
    0% {
        transform: translate(20vh, 20vh);
    }

    25% {
        transform: translate(35vh, 30vh);
    }

    50% {
        transform: translate(20vh,40vh);
    }

    75% {
        transform: translate(10vh, 30vh);
    }

    100% {
        transform: translate(20vh, 20vh);
    }
}