body {
	font-family: Arial;
	background-color: #232323;
}
section {
	height: 100vh;
	position: relative;
}

/* MAIN CLASSES - FIRST SHAPES */
.shape {
	cursor: pointer;
}
.first-shapes {
	display: block;
}
.first-box {
	height: 50px;
	width: 50px;
	background-color: #52ac9f;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
}
.second-box,
.third-box {
	background-color: #52ac9f;
	top: 50%;
	left: 50%;
	height: 50px;
	width: 300px;
	margin: -25px 0 0 -150px;
	position: absolute;
	display: none;
	opacity: 0;
}

/* ADDED/ANIMATED CLASSES - FIRST SHAPES */
.first-grow {
	width: 300px;
	margin: -25px 0 0 -150px;
	transition: all ease .5s;
}
.first-merge {
	height: 100px;
	transition: all ease .5s;
}

/* MAIN CLASSES - SECOND SHAPES */
.second-shapes {
	display: none;
	opacity: 0;
}
.shape-one {
	height: 300px;
	width: 300px;
	background-color: #52ac9f;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -150px;
}
.shape-two,
.shape-three,
.shape-four,
.shape-five,
.shape-six,
.shape-seven,
.shape-eight,
.shape-nine {
	background-color: #b0b0b0;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	display: none;
	opacity: 0;
}
.shape-two {
	height: 156px;
	margin: -78px 0 0 67px;
}
.shape-three {
	height: 192px;
	margin: -96px 0 0 42px;
}
.shape-four {
	height: 212px;
	margin: -106px 0 0 17px;
}
.second-shapes .shape-five {
	height: 216px;
	margin: -108px 0 0 -8px;
}
.shape-six {
	height: 212px;
	margin: -106px 0 0 -33px;
}
.shape-seven {
	height: 192px;
	margin: -96px 0 0 -58px;
}
.shape-eight {
	height: 156px;
	margin: -78px 0 0 -83px;
}
.shape-nine {
	height: 76px;
	margin: -38px 0 0 -108px;
}
.click-circle {
	height: 140px;
	width: 140px;
	border-radius: 50%;
	background-color: #52ac9f;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 170px 0 0 -70px;
	display: none;
	opacity: 0;
}

/* ADDED/ANIMATED CLASSES - SECOND SHAPES */
.shape-one-shrink {
	width: 50px;
	height: 50px;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	transition: all ease 2s;
}
.shrink-move-over {
	margin: -38px 0 0 92px;
	background-color: #b0b0b0;
	height: 76px;
	width: 16px;
}
.mint-background {
	animation: fadeMint 1s forwards 5s;
}
.mint-background-2 {
	animation: fadeMint 1s forwards 3s;
}
.second-grow {
	height: 216px;
	width: 25px;
}
.final-shape {
	background-color: #52ac9f;
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 216px;
	width: 25px;
	margin: -108px 0 0 -108px;
	opacity: 0;
}

/* KEYFRAME ANIMATIONS - ALL SHAPES */
@keyframes fadeMint {
  from {
  	background-color: #b0b0b0;
  }
  to {
  	background-color: #52ac9f;
  }
}