<!-- #CodePenChallenge: Lightness -->



<div id="bubble2" class="gradientBubble"></div>
<div id="bubble" class="gradientBubble"></div>
<div id="bubble3" class="gradientBubble"></div>
<div id="bubble4" class="gradientBubble"></div>
<div id="moon">
	<div>

body {
	height: 100vh;
	margin: 0;
	background-image: radial-gradient(#6dd5ed, #84b9bf, #78a4bf);
	display: flex;
	align-items: center;
	justify-content: center;
}

#bubble {
	position: relative;
	height: 100px;
	width: 100px;
	border-radius: 50%;
	background-color: white;
	background: linear-gradient(to left, #7e94bf, #88bfb0);
	box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.2);
	animation: rise 7s linear;
	animation-iteration-count:3;
	animation-delay: 2s;
	animation-timing-function: ease-in-out;
}

#bubble:before {
	content: "";
	position: absolute;
	display: block;
	top: 5px;
	left: 7px;
	height: 90px;
	width: 90px;
	border-radius: 50%;
	background: #84b9bf;
	opacity: 0.8;
	overflow: hidden;
}

#bubble:after {
	content: "";
	position: absolute;
	display: block;
	top: 25px;
	left: 70px;
	height: 25px;
	width: 9px;
	border-radius: 50%;
	background: white;
	overflow: hidden;
}

#bubble2 {
	position: relative;
	height: 50px;
	width: 50px;
	border-radius: 50%;
	background-color: white;
	background: linear-gradient(to left, #7e94bf, #88bfb0);
	box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.2);
	animation: linear rise 4s;
	animation-delay: 2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count:3;
	margin: 30px;
	margin-top: 160px;
}

#bubble2:before {
	content: "";
	position: absolute;
	display: block;
	top: 5px;
	left: 7px;
	height: 45px;
	width: 45px;
	border-radius: 50%;
	background: #84b9bf;
	opacity: 0.8;
	overflow: hidden;
}

#bubble2:after {
	content: "";
	position: absolute;
	display: block;
	top: 15px;
	left: 40px;
	height: 10px;
	width: 5px;
	border-radius: 50%;
	background: white;
	overflow: hidden;
}


#bubble3 {
	position: relative;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	background-color: white;
	background: linear-gradient(to left, #7e94bf, #88bfb0);
	box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.2);
	animation: linear rise2 5s;
	animation-delay: 3s;
	animation-timing-function: ease-in-out;
	animation-iteration-count:3;
	margin: 30px;
	margin-top: 200px;
}

#bubble3:before {
	content: "";
	position: absolute;
	display: block;
	top: 5px;
	left: 7px;
	height: 23px;
	width: 23px;
	border-radius: 50%;
	background: #84b9bf;
	opacity: 0.8;
	overflow: hidden;
}

#bubble3:after {
	content: "";
	position: absolute;
	display: block;
	top: 15px;
	left: 24px;
	height: 8px;
	width: 4px;
	border-radius: 50%;
	background: white;
	overflow: hidden;
}

#bubble4 {
	position: relative;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	background-color: white;
	background: linear-gradient(to left, #7e94bf, #88bfb0);
	box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.2);
	animation: linear rise2 4s;
	animation-delay: 5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count:3;

}

#bubble4:before {
	content: "";
	position: absolute;
	display: block;
	top: 5px;
	left: 7px;
	height: 23px;
	width: 23px;
	border-radius: 50%;
	background: #84b9bf;
	opacity: 0.8;
	overflow: hidden;
}

#bubble4:after {
	content: "";
	position: absolute;
	display: block;
	top: 15px;
	left: 25px;
	height: 8px;
	width: 4px;
	border-radius: 50%;
	background: white;
	overflow: hidden;
}


@keyframes rise{
	0% {transform: translatey(0px) scale(1);}
	15% {transform: translatey(-50px) scale(1.1);}
	45% {transform: translatey(-300px) scale(1.3);}
	75% {transform: translatey(-420px) scale(1.4);}
	100%{transform: translatey(-690px) scale(1.4);}
}

@keyframes rise2{
	0% {transform: translatey(0px) scale(1);}
	15% {transform: translatey(-50px) scale(1.1)rotate(90deg);}
	45% {transform: translatey(-300px) scale(1.5)rotate(250deg);}
	75% {transform: translatey(-420px) scale(2)rotate(300deg);}
	100%{transform: translatey(-690px) scale(2)rotate(360deg);}
}


/*try crescent moon shape with gradient of choosing or else*/

/*@keyframes popDiv { 
    0%   {transform: scale(1)  rotate(0deg);}
    25%  {transform: scale(2) rotate(120deg);}
    50%  {transform: scale(.5) rotate(240deg);}
    100% {transform: scale(1) rotate(360deg);}
}*/