@charset "UTF-8";

/* CSS rules go below */
     
*{
    transition: all 500ms ease-in-out 0ms;
}

div.box{
    width:600px;
    height:400px;
    margin:100px;
    border-radius: 52% 48% 40% 60% / 57% 84% 16% 43%;
    box-shadow: inset 50px 50px 200px 5px rgba(0,0,255,1),
                inset -50px -50px 200px 5px rgb(0, 255, 4);
}


div.box:hover{
    box-shadow: inset 50px 50px 200px 5px rgb(0,0,255,1),
    inset -50px -50px 200px 5px rgb(195, 0, 255);
}


div.box2{
    width:700px;
    height: 290px;
    margin:150px;
    border-radius:25% 75% 13% 87% / 65% 44% 56% 35%;
    box-shadow: 50px 50px 200px 5px rgb(0,0,255,1),
                -50px -50px 200px 5px rgb(195, 0, 255);
    position: relative;
    left: 30px;
    right: 30px;
    top: 30px;
    bottom: 30px
}


div.box3{
    width:700px;
    height: 290px;
    margin:150px;
    border-radius: 25% 75% 13% 87% / 65% 44% 56% 35%;
    box-shadow: inset 50px 50px 200px 5px rgba(0,0,255,1),
    inset -50px -50px 200px 5px rgb(195, 0, 255);

                position: relative;
                left: 30px;
                right:100px;
                top: -410px;
                bottom: -400px;
            
}


div.box3:hover{
    box-shadow: inset 50px 50px 200px 5px rgb(0,0,255,1),
    inset -50px -50px 200px 5px rgb(0, 255, 47);
}


div.box4{
    width:600px;
    height:300px;
    margin:100px;
    border-radius:25% 75% 83% 17% / 65% 66% 34% 35% ;
    box-shadow:inset 50px 50px 200px 5px rgb(14, 1, 126),
    inset -50px -50px 200px 5px rgb(255, 0, 200);
    position: relative;
                left: 13dvb;
                right:150px;
                top: -250px;
                bottom: 400px;
}


 div.box4:hover{
 box-shadow: inset 50px 50px 200px 5px rgb(0,0,255,1),
 inset -50px -50px 200px 5px rgb(0, 255, 47);
}

 
div.box5{
    width:500px;
    height:300px;
    margin:100px;
    border-radius: 55% 45% 89% 11% / 26% 82% 18% 74% ;
    position: relative;
                left: 50dvb;
                right:500px;
                top: -800px;
                bottom: 400px;

}


div.box5:hover{
    box-shadow: inset 50px 50px 200px 5px rgb(0, 255, 195),
    inset -50px -50px 200px 5px rgb(102, 0, 255);
 }


div.box6{ 
    width:500px;
    height:300px;
    margin:100px;
    border-radius : 56% 44% 73% 27% / 45% 68% 32% 55%;
    box-shadow: inset 50px 50px 200px 5px rgb(255, 0, 119),
                inset -50px -50px 200px 5px rgb(14, 1, 126);
    position: absolute;
    right:10vw;
    bottom:5vh;
}



div.box6:hover{
    box-shadow: inset 50px 50px 200px 5px rgb(255, 166, 0),
                inset -50px -50px 200px 5px rgb(102, 0, 255);
 }
            

div.box7{
    width:100vw;
    height:90vh;
    margin:0px;
    border-radius:83% 17% 83% 17% / 44% 43% 57% 56%;
    box-shadow:inset 50px 50px 200px 5px rgb(255, 166, 0),
    inset -50px -50px 200px 5px rgb(27, 3, 241);
    position: absolute;
                left: 0vw;
                top: 0vh;
 } 


 div.box7:hover{
    box-shadow: inset 50px 50px 200px 5px rgb(0, 255, 195),
                inset -50px -50px 200px 5px rgb(102, 0, 255);
 }  
                
                    
div.box10{
    width:80vw;
    height:90vh;
    margin:0px;
    border-radius:83% 17% 83% 17% / 44% 43% 57% 56%;
    box-shadow:inset 50px 50px 200px 5px rgb(255, 255, 255),
    inset -50px -50px 200px 5px rgb(27, 3, 241);
    position: absolute;
                left: 12vw;
                top: 150vh;
 } 
 

 div.box10:hover{
    box-shadow: inset 50px 50px 200px 5px rgb(0, 255, 195),
                inset -50px -50px 200px 5px rgb(102, 0, 255);
 } 


div.box8{
    height:300px;
    margin:200px;
    border-radius:17% 83% 16% 84% / 44% 93% 7% 56% ;
    box-shadow:50px 50px 200px 5px rgb(100, 155, 250),
    inset -50px -50px 200px 5px rgb(27, 3, 241);
    position: absolute;
    left: 10vw;
    top: 10vh;
 } 


 div.box8:hover{
    box-shadow: inset 50px 50px 200px 5px rgb(0, 255, 195),
                inset -50px -50px 200px 5px rgb(102, 0, 255);
                transition-delay: 500ms;
 }   
            

div.box9{
    width:90vw;
    height:90vh;
    margin:200px;
    border-radius:17% 83% 16% 84% / 44% 93% 7% 56% ;
    box-shadow:inset 50px 50px 200px 5px rgb(255, 0, 119),
               inset -50px -50px 200px 5px rgb(255, 0, 119);
    position: relative;
                left: 2 dvb;
                top: -1300px;
                transition-delay: 500ms;
 } 



 div.box9:hover{
    box-shadow: inset 50px 50px 200px 5px rgb(0, 255, 195),
                inset -50px -50px 200px 5px rgb(102, 0, 255);
                transition-delay: 500ms;
 }   


 div.box11{
    width:80vw;
    height:90vh;
    margin:0px;
    border-radius:83% 17% 33% 67% / 60% 43% 57% 40% ;
    box-shadow:inset 50px 50px 200px 5px rgb(255, 166, 0),
    inset -50px -50px 200px 5px rgb(27, 3, 241);
    position: absolute;
                left: 20vw;
                top: 250vh;
 } 

 div.box11:hover{
    box-shadow: inset 50px 50px 200px 5px rgb(0, 255, 195),
                inset -50px -50px 200px 5px rgb(102, 0, 255);
                transition-delay: 500ms;
 }   

div.box12{
width:30vw;
height:90vh;
border-radius:36% 64% 33% 67% / 60% 43% 57% 40%;
position: absolute;
                left: 20vw;
                top: 300vh;
 }

 div.box12:hover{
    box-shadow: inset 50px 50px 200px 5px rgb(0, 255, 195),
    inset -50px -50px 200px 5px rgb(102, 0, 255);
 }
 
 div.box13{
    width:100vw;
    height:30vh;
    margin:0px;
    border-radius:73% 27% 75% 25% / 24% 84% 16% 76%;
    box-shadow:inset 50px 50px 200px 5px rgb(255, 255, 255),
    inset -50px -50px 200px 5px rgb(27, 3, 241);
    position: absolute;
                left: 20vw;
                top: 250vh;
 } 

 div.box13:hover{
    box-shadow: inset 50px 50px 200px 5px rgb(0, 255, 195),
                inset -50px -50px 200px 5px rgb(102, 0, 255);
                transition-delay: 500ms;
 }   

 div.box14{
    width:100vw;
    height:30vh;
    margin:0px;
    border-radius:73% 27% 75% 25% / 24% 84% 16% 76%;
    position: absolute;
                left: 20vw;
                top: 250vh;
 } 

 div.box14:hover{
    box-shadow: inset 50px 50px 200px 5px rgb(255, 0, 191),
                inset -50px -50px 200px 5px rgb(102, 0, 255);
                transition-delay: 500ms;
 }   

 div.box15{
    width:40vw;
    height:80vh;
    margin:0px;
    border-radius:13% 87% 75% 25% / 24% 84% 16% 76% ;
    position: absolute;
                left: 20vw;
                top: 350vh;
 } 

 div.box15:hover{
    box-shadow: inset 50px 50px 200px 5px rgb(0, 200, 255),
                inset -50px -50px 200px 5px rgb(102, 0, 255);
                transition-delay: 500ms;
 }   

 div.box16{
    width:50vw;
    height:80vh;
    margin:0px;
    border-radius:80% 20% 75% 25% / 24% 84% 16% 76% ;
    box-shadow: inset 50px 50px 200px 5px rgb(0, 0, 0),
    inset -50px -50px 200px 5px rgb(102, 0, 255);

    position: absolute;
                left: 40vw;
                top: 350vh;
 } 

 div.box16:hover{
    box-shadow: inset 50px 50px 200px 5px rgb(255, 0, 102),
                inset -50px -50px 200px 5px rgb(102, 0, 255);
                transition-delay: 500ms;
 }