body {
	display:flex;
	align-items:center;
	height:100vh;
	justify-content:center;
	font-size:14px;
	color:#555;
	padding:0px 20px;
	overflow-y:auto;
	margin:0;
}
.icon-collect {
	margin:20px;
}
.icon-collect {
	min-width:3em;
	height:3em;
	border-radius:3em;
	cursor:pointer;
	position:relative;
	transition:background-color 0.3s;
	background-color:#ea4c4c;
	background-repeat:no-repeat;
	background-size:2em;
	background-position:center center;
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgwQjgwQkNCMzEyMTExRUE5MEEwOTdGMTc2ODM4RDQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgwQjgwQkNDMzEyMTExRUE5MEEwOTdGMTc2ODM4RDQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODBCODBCQzkzMTIxMTFFQTkwQTA5N0YxNzY4MzhENDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODBCODBCQ0EzMTIxMTFFQTkwQTA5N0YxNzY4MzhENDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4VLE1SAAABgklEQVR42uyYsUoDQRCGs5qoKYJNsBJTqJAXsDVgYxHSpbDRwhfwMdRGU4lVwEoEMdgJMSEhRdA8QTC9YiyEYJvNv7AHKeI5ezcLBmbggyuGm4/budllldY6MQ+xkJiTEFERFVERFVERnRkKHIAWGIEf0AFHIe8qgnswAH37vO9savZ6IkvgTv8edbA6lZ8BDyH5VZCk1ncRvdB/xzNYtNQJ+ZfU+op4etqyy0ZplRPbIhVC7hjkwRvX0p9regzBp0N+heKQJLbynkPbZx1/kwLnX5/zOHk2SeOG2KNj23e+QnF90aFHyXfOpW95FO1wil6ZAeFBUhPHGFm0Da49iJ6BLvcWanabG80Xpw61nUQDjsEohqDZEMqudaOIGrZBM4LkLViLUjOqqMHM4EPwRRD8AKUYtWKJBmyA1xDJHliPW4dD1LAMajMkn0CaowaXaHCwfpySbIAVrvcr5tu8DHgBKbADvtkOAx6uHXftIaPNemqR+1ERFVERFVER/VcxEWAA3pyX09PuzJEAAAAASUVORK5CYII=);
}
.icon-collect::before,.icon-collect::after {
	content:"";
	position:absolute;
	border-radius:100%;
	pointer-events:none;
	display:block;
}
.icon-collect::before {
	width:3em; 
	height:3em;
	top:-1px;
	left:-1px;
	border:1px solid #ea4c4c;
	opacity:0;
}
.icon-collect::after {
	width:8px;
	height:8px;
	position:absolute;
	padding:0 !important;
	display:inline-block;
	opacity:0;
	border-radius:100%;
	box-shadow:calc(1.5em) calc(-1.5em + 8px) 0px 0px #e94c4c,0px calc(-1.5em - 4px) 0px 0px #4CAF50,calc(-1.5em) calc(-1.5em + 8px) 0px 0px #009688,0px calc(1.5em + 4px) 0px 0px #673AB7,calc(1.5em) calc(1.5em - 8px) 0px 0px #FF9800,calc(-1.5em) calc(1.5em - 8px) 0px 0px #795548;
	pointer-events:none;
	left:calc(50% - 4px);
	top:calc(50% - 4px);
}
.icon-collect.collected {
	/* fill white heart */
    background-image:url(data:image/png;
	base64,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);
	animation:collect-image-scale 0.5s linear;
}
.icon-collect.collected.animation::before {
	animation:collect-before 1s cubic-bezier(0.03,0.16,0.4,1.68);
}
.icon-collect.collected.animation::after {
	animation:collect-after 1s cubic-bezier(0.48,0.37,0.43,0.42) forwards;
}
/* star */
.icon-collect.star-icon {
	background-color:#FF9800;
	/*  background-image:*/
}
.icon-collect.star-icon.collected {
	/*  background-image:*/
}
.icon-collect.star-icon::before {
	border-color:#FF9800;
}
/* star */




/* outline border */
.icon-collect.border-icon {
	border:1px solid #ea4c4c;
}
.icon-collect.star-icon.border-icon {
	border:1px solid #FF9800;
}
/* outline border */

@keyframes collect-image-scale {
	0% {
	background-size:0px;
}
40% {
	background-size:2.4em;
}
60% {
	background-size:1.6em;
}
70% {
	background-size:2.2em;
}
80% {
	background-size:1.9em;
}
90% {
	background-size:2.1em;
}
100% {
	background-size:2em;
}
}@keyframes collect-before {
	0%,70% {
	border-width:1px;
}
0% {
	opacity:1;
	transform:scale(1);
}
100% {
	transform:scale(2.5);
	border-width:0px;
	opacity:0;
}
}@keyframes collect-after {
	0% {
	opacity:0;
	transform:scale(1);
	box-shadow:calc(1.5em) calc(-1.5em + 8px) 0px 0px #e94c4c,0px calc(-1.5em - 4px) 0px 0px #4CAF50,calc(-1.5em) calc(-1.5em + 8px) 0px 0px #009688,0px calc(1.5em + 4px) 0px 0px #673AB7,calc(1.5em) calc(1.5em - 8px) 0px 0px #FF9800,calc(-1.5em) calc(1.5em - 8px) 0px 0px #795548;
}
20% {
	opacity:1;
}
100% {
	opacity:0;
	transform:scale(5);
	box-shadow:calc(1.5em) calc(-1.5em + 8px) 0px -10px #e94c4c,0px calc(-1.5em - 4px) 0px -10px #4CAF50,calc(-1.5em) calc(-1.5em + 8px) 0px -10px #009688,0px calc(1.5em + 4px) 0px -10px #673AB7,calc(1.5em) calc(1.5em - 8px) 0px -10px #FF9800,calc(-1.5em) calc(1.5em - 8px) 0px -10px #795548;
}
}@keyframes collect-after-2 {
	0% {
	opacity:0;
	transform:scale(1);
	box-shadow:20px -10px 0px 0px #e94c4c,0px -22px 0px 0px #4CAF50,-20px -10px 0px 0px #009688,0px 22px 0px 0px #673AB7,20px 12px 0px 0px #FF9800,-20px 13px 0px 0px #795548;
}
20% {
	opacity:1;
}
100% {
	opacity:0;
	transform:scale(5);
	box-shadow:20px -10px 0px -10px #e94c4c,0px -22px 0px -10px #4CAF50,-20px -10px 0px -10px #009688,0px 22px 0px -10px #673AB7,20px 12px 0px -10px #FF9800,-20px 13px 0px -10px #795548;
}
}/* ie */
@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) {
	.icon-collect::after {
	box-shadow:20px -10px 0px 0px #e94c4c,0px -22px 0px 0px #4CAF50,-20px -10px 0px 0px #009688,0px 22px 0px 0px #673AB7,20px 12px 0px 0px #FF9800,-20px 13px 0px 0px #795548 !important;
}
.icon-collect.animation.collected::after {
	animation:collect-after-2 1s cubic-bezier(0.48,0.37,0.43,0.42) forwards !important;
}
}/* edge */
_:-ms-lang(x),_::-webkit-meter-bar,.icon-collect::after {
	box-shadow:20px -10px 0px 0px #e94c4c,0px -22px 0px 0px #4CAF50,-20px -10px 0px 0px #009688,0px 22px 0px 0px #673AB7,20px 12px 0px 0px #FF9800,-20px 13px 0px 0px #795548 !important;
}
_:-ms-lang(x),_::-webkit-meter-bar,.icon-collect.animation.collected::after {
	animation:collect-after-2 1s cubic-bezier(0.48,0.37,0.43,0.42) forwards !important;
}