body {background-color: #ff6b4c;
}



.blob {

display: block;
border-radius:30% 70% 70% 30% / 48% 30% 70% 52%;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
transition: 1s;

}

.blob:hover{

    transform:rotate(90deg);
    transition: 1s;
    transition-timing-function: ease-in-out;
    -webkit-transition: all 1.5s;



}

.blob2 {

    display: block;
    border-radius:30% 70% 70% 30% / 48% 30% 60% 52%;
    margin-left: 50px;
    margin-right: 200px;
    margin-top: -100px;
    transition: 1s;  
    }
    
    .blob2:hover{
    
        transform:rotate(90deg);
        transition: 1s;
        transition-timing-function: ease-in-out;
        -webkit-transition: all 1.5s;
    }


.blob3 {

        display: block;
        border-radius:30% 50% 70% 30% / 48% 30% 70% 52%;
        margin-left: 800px;
        margin-right: 0px;
        margin-top: 110px;
        transition: 1s;  
        }
        
        .blob3:hover{
        
            transform:rotate(90deg);
            transition: 1s;
            transition-timing-function: ease-in-out;
            -webkit-transition: all 1.5s;
        }


.blob4 {

            display: block;
            border-radius:30% 50% 70% 30% / 48% 30% 70% 52%;
            margin-left: 0px;
            margin-right: 8000px;
            margin-top: -870px;
            transition: 1s;  
            }
            
.blob4:hover{
            
                transform:skew(100deg);
                transition: 1s;
                transition-timing-function: ease-in-out;
                -webkit-transition: all 1.5s;
            }

.blob5 {

                display: block;
                border-radius:30% 50% 70% 30% / 48% 30% 70% 52%;
                margin-left: 900px;
                margin-right: 220px;
                margin-top: 470px;
                transition: 1s;  
                }
                
    .blob5:hover{
                
                    transform:skew(90deg);
                    transition: 1s;
                    transition-timing-function: ease-in-out;
                    -webkit-transition: all 1.5s;
                }


                .blob6 {

                    display: block;
                    border-radius:30% 50% 70% 30% / 48% 30% 70% 52%;
                    margin-left: 240px;
                    margin-right: 520px;
                    margin-top: -570px;
                    transition: 1s;  
                    }
                    
        .blob6:hover{
                    
                        transform:skewY(90deg);
                        transition: 1s;
                        transition-timing-function: ease-in-out;
                        -webkit-transition: all 1.5s;
                    }


                    .blob7 {

                        display: block;
                        border-radius:30% 50% 70% 30% / 48% 30% 70% 52%;
                        margin-left: auto;
                        margin-right: 520px;
                        margin-top: 70px;
                        transition: 1s;  
                        }
                        
            .blob7:hover{
                        
                            transform:rotate(90deg);
                            transition: 1s;
                            transition-timing-function: ease-in-out;
                            -webkit-transition: all 1.5s;
                        }
.blob8 {

                            display: block;
                            border-radius:28% 50% 70% 30% / 48% 28% 70% 52%;
                            margin-left: 250px;
                            margin-right: auto;
                            margin-top: -1670px;
                            transition: 1s;  
                            }
                            
        .blob8:hover{
                            
                                transform:rotate(90deg);
                                transition: 1s;
                                transition-timing-function: ease-in-out;
                                -webkit-transition: all 1.5s;
                            }
 .blob9 {

                                display: block;
                                border-radius:28% 50% 70% 30% / 48% 28% 70% 52%;
                                margin-left: 750px;
                                margin-right: auto;
                                margin-top: 670px;
                                transition: 1s;  
                                }
                                
            .blob9:hover{
                                
                                    transform:rotateY(90deg);
                                    transition: 5s;
                                    transition-timing-function: ease-in-out;
                                    -webkit-transition: all 1.5s;
                                }
 .blob10 {

                                display: block;
                                border-radius:28% 50% 70% 30% / 48% 28% 70% 52%;
                                margin-left: 250px;
                                margin-right: auto;
                                margin-top: 700;
                                transition: 1s;  
                                }
                                
            .blob10:hover{
                                
                                    transform:rotateY(90deg);
                                    transition: 1s;
                                    transition-timing-function: ease-in-out;
                                    -webkit-transition: all 1.5s;
                                }
     .blob11 {

                                    display: block;
                                    border-radius:28% 50% 70% 30% / 48% 28% 70% 52%;
                                    margin-left: 500;
                                    margin-right: auto;
                                    margin-top: 520px;
                                    transition: 4s;  
                                    }
                                    
                .blob11:hover{
                                    
                                        transform:skew(120deg);
                                        transition: 2s;
                                        transition-timing-function: ease-in-out;
                                        -webkit-transition: all 1.5s;
                                    }

                                    .blob12 {

                                        display: block;
                                        border-radius:28% 50% 70% 30% / 48% 28% 70% 52%;
                                        margin-left: 420px;
                                        margin-right: auto;
                                        margin-top: 370px;
                                        transition: 1s;  
                                        }
                                        
                    .blob12:hover{
                                        
                                            transform:skew(40deg);
                                            transform:scale3d(200);
                                            transition: 2s;
                                            transition-timing-function: ease-in-out;
                                            -webkit-transition: all 1.5s;
                                        }