@charset "UTF-8" ; 


 body{ 
    background:  #f2f5e7;
    background-size: 100% 200%; 
    background-repeat: no-repeat;
    animation:  bubble 8s , effervescent 8s cubic-bezier(0,0,1,1) -.15s  ;
  
   /* transition:  8s; */
    overflow: hidden;
    height:100vh;
    margin: 0; 
	
}

@keyframes bubbleUp{ 
    from top:-200px; }
    to{bottom:-50%; }
}

@keyframes bubble{ 
	from{ transform: translateY(-200%);}
	to{transform: translateY(0); }
    
} 

@keyframes effervescent{ 
    0%{ 
     background: #b789d1;
      	margin-bottom:-1000px;
    }
   25%{ 
    	margin-bottom: -150px; 
    }
    50%{ 
    	margin-bottom: -50px; 
    }
    75%{ 
    	margin-bottom: -25px; 
    }
	
    100%{ 
		
        margin-top: -50px; 
    }
}


#h1{ 
    font-size: 32px; 
    color: #E9E9E9; 
    font-family: AppleSymbols;
    text-align: center;
    padding:20px;
    border-radius: 5%; 
}

#frm{ 

    border-radius: 50%;
    opacity: .75;
    width: 20%; 
    margin: 132px auto; 
    padding: 52px; 
    font-family: AppleSymbols;
    color:#E0D5D5;
    box-shadow: 0 40px 50px rgba(0, 0 ,0 ,0.2), inset 0px 20px 40px 5px rgba(255,255,255,1);
    animation:  bubbleUp 8s ease-in, bubble 5s, effervescent 10s cubic-bezier(0.36, 0.45, 0.25, 0.33) ;
    z-index:2
}

#btn{ 
    color: #fff; 
    background-color: #337ab7;
    padding: 8px; 
    margin-left: 60%;
    border-radius: 5px;
    font-family: AppleSymbols;   
}

.bubbleIn{ 
    border-radius: 50%;
	opacity: .75;
    width: 200px;
    height:200px;
    position: absolute;
    background: linear-gradient(360deg, #d3b5e4,#C08EE7, #b789d1, #774A91, #55296e, #f2f5e7 );
    margin: 120px auto; 
    padding: 150px; 
    color:#E0D5D5;
    box-shadow: 0 40px 50px rgba(139, 72, 173, 0.2), inset 0px 20px 40px 5px rgba(255,255,255,1);
    animation: bubblyUp 5s , bubbly 10s , effervescence 10s cubic-bezier(0.36, 0.45, 0.25, 0.33) -.15s;
   
}
@keyframes bubblyUp{ 
    from {bottom:-100%; }
    to{bottom:100%; }
}

@keyframes bubbly{ 
	 0%{ 
    	background: #f2f5e7 ; 
        margin-left:0px; 
       
	 }
	50%{ 
    	background: #774A91;
		margin-right:100px; 
	}
    100%{ 
    	background: #774A91;
		margin-left:100px; 
	}
}

@keyframes effervescence{ 
	0%{ 
        
        margin-bottom: -500px;
    }
    50%{ 
        margin-bottom: 50%; 
    }
 
    100%{ 
        
        margin-top:50%;
    }
}

        
.bubbleOut{ 
    border-radius: 50%;
	opacity: .75;
    width: 200px;
    height:200px;
    position: absolute;
    background: linear-gradient(360deg, #d3b5e4,#C08EE7, #b789d1, #774A91, #55296e, #f2f5e7 );
    margin: 120px auto; 
    padding: 50px; 
    color:#E0D5D5;
    box-shadow: 0 40px 50px rgba(0, 0 ,0 ,0.2), inset 0px 20px 40px 5px rgba(255,255,255,1);
    animation:  bubblingUp 10s ease-in-out, bubbling 10s , gasy 10s cubic-bezier(0.36, 0.45, 0.75, 0.33) -.15s ;
    animation-duration: 10s;
    z-index:0; 
}
@keyframes bubblingUp{ 
    from {bottom:-150%; }
    to{top:150%; }
}

@keyframes bubbling{ 
    0%{ 
    	background: #f2f5e7 ; /*  */ 
        margin-right:20%; 
        }
    25%{ 
    	background: #C08EE7; 
        margin-left: 35%;
        }
    50%{ 
        background: #b789d1; 
        margin-right: 75%;
	 }
    75%{ 
        background: #55296e ; 
        margin-left:25%;
	 }
    100%{ 
    	background: #774A91;
    }
}

@keyframes gasy{ 
    0%{ 
        margin-bottom: -10%;
    }
    50%{ 
        margin-bottom: 200%; 
    }
    100%{ 
        margin-top:-100%;
    }
}

.bubbleHere{ 
    border-radius: 50%;
	opacity: .75;
    width: 500px;
    height:500px;
    position: absolute;
    /*background: linear-gradient(360deg, #d3b5e4,#C08EE7, #b789d1, #774A91, #55296e, #f2f5e7 );*/
    margin: 120px auto; 
    padding: 50px; 
    color:#E0D5D5;
    box-shadow: 0 40px 50px rgba(0, 0 ,0 ,0.2), inset 0px 20px 40px 5px rgba(255,255,255,1);
    animation:  blase 10s ease-in-out, seifenblase 8s , vollgas 10s cubic-bezier(0.36, 0.45, 0.75, 0.33) ;
    animation-duration: 10s;
    z-index: -1; 
}
@keyframes blase{ 
    from {bottom:-150%; }
    to{top:150%; }
}

@keyframes seifenblase{ 
    0%{ 
    	background: #f2f5e7 ; 
        margin-right:50%; 
       
    }
    25%{ 
    	background: #C08EE7; 
        margin-right:40%;
        
    }
    50%{ 
        background: #b789d1; 
        margin-left: 25%;
	 }
    75%{ 
        background: #774A91 ; 
        margin-left:10%;
	 }
    100%{ 
    	background: #55296e ;
        margin-left:60%;
        
        
    }
}

@keyframes vollgas{ 
    0%{ 
       margin-bottom: 0%;
    }
    25%{ 
        margin-bottom: 20%;
    }
    50%{ 
        margin-top: 50%; 
    }
    75%{ 
          margin-top:-20%; 
    }
    100%{ 
         margin-top: -175%; 
        
    }
}