body {
	height: 100vh;
	margin: 0;
	display: grid;
	place-items: center;
	background: rgb(177, 107, 226);
	background: linear-gradient(
		213deg,
		rgba(222, 191, 244, 1) 0%,
		rgb(249, 107, 107) 50%,
		rgba(255, 215, 158, 1) 100%
	);
}


.bubble {
	height: 200px;
	width: 200px;
	background: rgb(250,255,255);
background: radial-gradient(at 60px 60px, rgba(250,255,255,1) 0%, rgba(0,255,241,0.1) 20%,rgba(0,255,241,0.3) 200%);
	border-radius: 50%;
	animation: float 5s infinite;
	transition: 1s;
}

.cute-face{
	width: 80px;
	height: 40px;
	position: relative;
	top: 35%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.eye-cont{
	display: flex;
}
.eye{
	background: #333;
	height: 30px;
	width: 20px;
	border-radius: 50%;
	margin: 5px auto;
	top: 20%;
	position: relative;
}

.whites{
	position: relative;
	height: 12px;
	width: 7px;
	left: 58%;
	top: 20%;
	background: white;
	border-radius: 50%;
}

.blush{
	height: 10px;
	width: 22px;
	background: #F88379;
	position: absolute;
	display: inline;
	border-radius: 50%;
	top: 80%;
	opacity: .7;
}

.b2{
	left: 74%;
}

.mouth{
	width: 15px;
	height: 7px;
	background: #333;
	display: inline-block;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	position: relative;
	left: 40%;
}

@keyframes float {
	0% {
		transform: translateY(20px);
	}
	50% {
		transform: translateY(-20px);
	}
	100% {
		transform: translateY(20px);
	}

}