body{
    background:linear-gradient(45deg,red,yellow,orange,deeppink);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width:100%;
    height: 100vh;
    overflow: hidden;
}
.con{
    width:1300px;
    height:550px;
    transform: translate(25px,0px);
}
*{
 padding: 0;
 margin: 0;
}
.img1{
     width:250px;
     height:250px;
     border-radius:150px;
     animation-name: kavin;
     animation-duration:2s;
     animation-iteration-count:infinite;
}
@keyframes kavin1{
    0%{

    }
    100%{
        transform:rotatex(360deg);
    }
}
    
.b1{
    margin-top: 70px;
    margin-left: 90px;
    width:auto;
}
input{
    margin-left:0px;
    padding:10px;
    width:270px;
    border-bottom-right-radius:30px ;
    
}
.img2{
    width:250px;
    height:250px;
    border-radius:150px;
    animation-name: kavin;
    animation-duration:2s;
    animation-iteration-count:infinite;
}
@keyframes kavin{
   0%{

   }
   100%{
       transform:rotatex(360deg);
   }


}
  

.b2{
    margin-left: 800px;
    margin-top:-300px
}
.rel1{
    width:330px;
    height:330px;
    margin-left: 420px;
    margin-top:-100px;
    border-bottom-right-radius:100px ;
}
.b11{
    height:100px;
    width:100px;
   margin-left: 50px;
    margin-top:280px ;
    background-color: lightblue;
    animation-name:bubble1;
    animation-duration:3s;
    animation-iteration-count: infinite;
    background-color: red;
    transform: rotate(45deg);
    
}
.b11:before{
    content: '';
    position: absolute;
    width:100px;
    height:100px;
    border-radius: 50%;
    background-color:red;
    transform:translate(-50px,0)
   
}
.b11:after{
    content: '';
    position: absolute;
    width:100px;
    height:100px;
    border-radius: 50%;
    background-color: red;
    border-left:-50%;
    transform:translate(0px,-50px)
   
}
@keyframes bubble1{
    0%{
        transform: rotate(90deg);
        opacity: 0.3;
        padding: 0;
         margin: 0;
        margin-top: -190px;

    }
    25%{
        opacity: 0.5;
        
    }
    50%{
        transform: rotate(360deg);
        opacity: 0.6
    }
    75%{
        opacity: 0.7;
    }
    100%{
        margin-top: -800px;
    }
}
.b22{
    height:50px;
    width:50px;
   margin-left:350px;
    margin-top:-280px ;
    background-color: lightblue;
    animation-name:bubble2;
    animation-duration:3s;
    animation-iteration-count: infinite;
    background-color: pink;
    transform: rotate(45deg);
}
.b22:before{
    content: '';
    position: absolute;
    width:50px;
    height:50px;
    border-radius: 50%;
    background-color:pink;
    transform:translate(-25px,0)
   
}
.b22:after{
    content: '';
    position: absolute;
    width:50px;
    height:50px;
    border-radius: 50%;
    background-color:pink;
    border-left:-50%;
    transform:translate(0px,-25px)
   
}
@keyframes bubble2{
    0%{
        transform: rotate(90deg);
        opacity: 0.3;
        padding: 0;
 margin: 0;

    }
    25%{
        opacity: 0.5;
        
    }
    50%{
        transform: rotate(360deg);
        opacity: 0.6
    }
    75%{
        opacity: 0.6;
    }
    100%{
        margin-top: -90px;
    }
}
.b33{
    height:100px;
    width:100px;
   margin-left:700px;
    margin-top:-280px ;
    animation-name:bubble3;
    animation-duration:3s;
    animation-iteration-count: infinite;
    background-color: red;
    transform: rotate(45deg);
}
.b33:before{
    content: '';
    position: absolute;
    width:100px;
    height:100px;
    border-radius: 50%;
    background-color:red;
    transform:translate(-50px,0)
   
}
.b33:after{
    content: '';
    position: absolute;
    width:100px;
    height:100px;
    border-radius: 50%;
    background-color: red;
    border-left:-50%;
    transform:translate(0px,-50px)
   
}
@keyframes bubble3{
    0%{
        transform: rotate(90deg);
        opacity: 0.3;
        padding: 0;
 margin: 0;

    }
    25%{
        opacity: 0.5;
        
    }
    50%{
        transform: rotate(360deg);
        opacity: 0.6
    }
    75%{
        opacity: 0.7;
    }
    100%{
        margin-top: -90px;
    }
}
.b44{
    height: 50px;
    width:50px;
   margin-left:1100px;
    margin-top:-80px ;
    background-color: lightblue;
    animation-name:bubble4;
    animation-duration:3s;
    animation-iteration-count: infinite;
    background-color: pink;
    transform: rotate(45deg);
    
}
.b44:before{
    content: '';
    position: absolute;
    width:50px;
    height:50px;
    border-radius: 50%;
    background-color:pink;
    transform:translate(-25px,0)
   
}
.b44:after{
    content: '';
    position: absolute;
    width:50px;
    height:50px;
    border-radius: 50%;
    background-color: pink;
    border-left:-50%;
    transform:translate(0px,-25px)
   
}
@keyframes bubble4{
    0%{
        transform: rotate(90deg);
        opacity: 0.3;
        padding: 0;
 margin: 0;
      

    }
    25%{
        opacity: 0.5;
        
    }
    50%{
        transform: rotate(360deg);
        opacity: 0.6
    }
    75%{
        opacity: 0.7;
    }
    100%{
        margin-top: -90px;
    }
}
#sublas{
    width:100px;
    height:100px;
    position: absolute;
    margin-left:1000px;
    margin-top: -150px;
    border-radius: 50px;
    border:none;
    background-color: rgb(128, 245, 32);
   color:black;
   font-size: 20px;
   cursor: pointer;
   animation-name:hellomap;
   animation-duration: 3s;
   animation-iteration-count: infinite;
}
@keyframes hellomap{
    100%{
       transform:rotate(360deg);
    }

}
#sublas:hover{
    background:linear-gradient(190deg,white,deeppink,orange);
    text-align: center;
}