*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
}
body{
    width: 100%;
    height: 100vh;
    background:linear-gradient(#2196f3,#e91e63);
    overflow: hidden;
   
}
.bubbles{
    position: absolute;
    bottom: 0;
   display: flex;
   width: 100%;
   justify-content: space-around;
   background: transparent;
}
.bubbles span{
    height: 60px;
    width: 60px;
    background: rgba(255,255,255,0.15);
    
   
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    backdrop-filter:blur(1px);
    animation: move 10s linear infinite;

    position: relative;
    overflow: hidden;
    

}
@keyframes move{
 100%{
   transform: translateY(-90vh);
 }
}
.bubbles span.one{
    animation-delay:2.2s;
    transform: scale(2.15);
}
.bubbles span.two{
    animation-delay:3.5s;
     transform: scale(1.55);
}
.bubbles span.three{
    animation-delay:0.2s;
     transform: scale(0.35);
}
.bubbles span.four{
    animation-delay:6s;
     transform: scale(2.15);
}
.bubbles span.five{
    animation-delay:7s;
     transform: scale(0.5);
}
.bubbles span.six{
    animation-delay:4s;
     transform: scale(2.5);
}
.bubbles span.seven{
    animation-delay:3s;
     transform: scale(1.5);
}
.bubbles span:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 60px;
    width: 40%;
    transform: skew(45deg) translateX(150px);
    background: rgba(255,255,255,0.1);
    animation: mirror 3s linear infinite;
}
@keyframes mirror{
    100%{
        transform:translateX(-450px)

    }
}
.bubbles span.one:before{
    animation-delay: 1.5s;
}
.bubbles span.two:before{
    animation-delay: 1.5s;
}

.bubbles span.three:before{
    animation-delay: 2.5s;
}

.bubbles span.four:before{
    animation-delay: 7.5s;
}

.bubbles span.five:before{
    animation-delay: 4.5s;
}

.bubbles span.six:before{
    animation-delay: 0.5s;
}
.bubbles span.seven:before{
    animation-delay: 6s;
}



#main-body{

display: flex; 
justify-content: center;
align-items: center;
max-height: 100vh;
margin-top: 150px;
/* overflow: hidden; */


}
.main-calc{
max-width: 30rem;
width: 90%;
height: 410px;
background: rgba(255,255,255,0.1);
padding: 1rem;
border-radius: 1.5rem;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0, 6px 20px 0 rgba(0,0,0,0.19);
border: 2px  solid white;
align-items: center;
justify-content: center; 


}
.main-calc header{
color:white;
border-bottom: 0.16rem dashed yellow;
text-align: center;
padding: 0.5rem;
margin-bottom: 1rem;
font-family: 'Montserrat', sans-serif;
}
.form{
margin: 2rem 0;

}
.form label{
font-family:'Montserrat', sans-serif ;
font-weight: 200;
color: white;
padding: 0.2rem 0;
display:block;
}
.form input{
background: transparent;
border: none;
outline: none;
color: white;
font-size: 1.2rem;
border-bottom:0.1rem solid  ;
}
.form select{
background: #00666c ;
border: none;
outline: none;
color:white;
font-size: 1.1rem;
border-bottom:0.1rem solid  #00666c;
border-radius: 10px;
}
.btn{
padding: 10px;
border-radius: 20px;
border: none;
background:#00666c ;
color: white;
}
.btn:hover{
background:#87010c ;
}
.result{
color: white;
font-size: 1.2rem;
font-family:'Montserrat', sans-serif ;
}

.result span, .result sup{
color:white;
}

@media only screen and (max-width:500px){


    .bubbles span{
        width: 30px;
        height: 30px;
    } 
}