.blob-1{
    width: 150px;
    height: 180px;
    border-radius: 38% 62% 66% 34%/60% 41% 59% 40%  ;
    right: -2.5rem;
    bottom: 40rem;
    animation: blob-1 4s linear infinite;
    transform: scaleX(-1) rotate(-10deg);
}

.blob-2{
    width: 180px;
    height: 190px;
    border-radius: 61% 39% 67% 33% / 35% 63% 37% 65% ;
    right: -1rem;
    bottom: 3.5rem;
    animation: blob-2 4s linear infinite;
}

.blob-3{
    width: 140px;
    height: 180px;
    border-radius: 31% 69% 50% 50% / 70% 63% 37% 30% ;
    left: -1rem;
    top: -30rem;
    animation: blob-3 4s linear infinite;
}

.blob-4{
    width: 210px;
    height: 190px;
    border-radius: 31% 69% 50% 50% / 70% 63% 37% 30% ;
    left: -5rem;
    bottom: 9rem;
    animation: blob-4 4s linear infinite;
    transform: scaleX(-1);

}

/*  animating blobs  */
@keyframes blob-1 {
    0%, 100%{
        border-radius: 38% 62% 66% 34%/60% 41% 59% 40%  ;
    }
    33%{
        border-radius: 77% 23% 50% 50% / 53% 63% 37% 47% ;
    }
    66%{
        border-radius: 85% 15% 79% 21% / 33% 84% 16% 67% ;
    }
}

@keyframes blob-2 {
    0%, 100%{
        border-radius: 61% 39% 67% 33% / 35% 63% 37% 65% ;
    }
    33%{
        border-radius: 77% 23% 50% 50% / 53% 63% 37% 47% ;
    }
    66%{
        border-radius: 85% 15% 79% 21% / 33% 84% 16% 67% ;
    }
}

@keyframes blob-3 {
    0%, 100%{
        border-radius: 31% 69% 50% 50% / 70% 63% 37% 30% ;
    }
    33%{
        border-radius: 77% 23% 50% 50% / 53% 63% 37% 47% ;
    }
    66%{
        border-radius: 85% 15% 79% 21% / 33% 84% 16% 67% ;
    }
}

@keyframes blob-4 {
    0%, 100%{
        border-radius: 31% 69% 50% 50% / 70% 63% 37% 30% ;
    }
    33%{
        border-radius: 77% 23% 50% 50% / 53% 63% 37% 47% ;
    }
    66%{
        border-radius: 85% 15% 79% 21% / 33% 84% 16% 67% ;
    }
}


/*       Breaking Points       */
/* small devices */
@media screen and (max-width: 319px) {
    #home-page {
        grid-template-rows: max-content 270px;
    }

    .home-images [class*=blob] {
        scale: .8;
    }

    #headline {
        font-size: 2rem;
    }
}
@media screen and (max-width: 400px) and (max-height: 650px){
    #home-page{
        height: initial;
    }
}

@media screen and (min-width: 400px) and (max-height: 700px){
    #home-page{
        height: initial;
    }
}


/* medium devices */
@media screen and (min-width: 500px) {
    #home-page{
        grid-template-columns: 600px;
        justify-content: center;
    }
    #home-text{
        font-size: 1.5rem;
        width: 400px;
    }
    .home-images [class*=blob]{
        scale: 1.2;
    }
    .blob-2{
        bottom: 7rem;
    }
    .blob-1{
        bottom: 37rem;
    }
}

/* large devices */
@media screen and (min-width: 800px){
    #home-page{
        grid-template-columns: 800px;
        justify-content: center;
    }
    #home-text{
        width: 400px;
    }
    .home-images [class*=blob]{
        scale: 1.5;
    }

    .blob-3{
        top: -28rem;
    }
    .blob-1{
        bottom: 35rem;
    }
}


/* taller devices */

@media screen and (min-width: 1150px) {
    #home-page{
        grid-template-columns: 1200px;
        margin-inline: auto;
    }
    #home-text{
        width: 400px;
    }
    .home-images [class*=blob]{
        scale: 1.8;
    }
    .blob-1{
        bottom: 32rem;
        right: 0;
    }
    .blob-3{
        top: -23rem;
    }
    .blob-2{
        right: 10rem;
    }
    .blob-4{
        left: 6rem;
    }
}

@media screen and (min-width: 1500px){
    #home-page{
        grid-template-columns: 1500px;
        justify-content: center;
    }
    #headline{
        font-size: 5rem;
    }
    #home-text{
        font-size: 2rem;
        width: 800px;
    }
}

/* for devices with small height */
@media screen and (max-height: 700px){
    #home-data{
        padding-top: 0;
    }
}
@media screen and (max-height: 900px){
    #home-data{
        padding-top: 1rem;
    }
}