body{
	margin: 0px;
	background-color: #FFF;
}
.divCanvas {
	width: 100vw;
    height: 100vw;
	position: relative;
	display: block;
	overflow: hidden;
}
.divCircle {
	position: absolute;
	display: block;
}
.divBubble {
	position: absolute;
	display: block;
}
.bubble {
	transform-origin: center;
	position: absolute;
	animation: fade 4s ease-out;
}
.divLeaf {
	position: absolute;
	display: block;
	display: flex;
}

circle {
	box-shadow: 10px 10px black;
}

.rotate1 {
	animation: rotate 10s linear infinite;
}

.rotate2 {
	animation: rotate 15s linear infinite;
}

.rotate3 {
	animation: rotate 20s linear infinite;
}

.rotate1rev {
	animation: rotate 10s reverse linear infinite;
}

.rotate2rev {
	animation: rotate 15s reverse  linear infinite;
}

.rotate3rev {
	animation: rotate 20s reverse linear infinite;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes fade {
	0% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}