* {
	box-sizing: border-box;
}
ul {
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100vw;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	
	li {
		display: block;
		width: 10vh;
		height: 10vh;
		position: relative;
		margin: 1rem;
		
		&, &::after {
			border-radius: 50%;
		}
		
		&::after {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			
			// magic ! * * * https://caniuse.com/#feat=css-filters ( IE :( bad taste )
			-webkit-filter: blur(10px);
			-moz-filter: blur(10px);
			-o-filter: blur(10px);
			-ms-filter: blur(10px);
			filter: blur(10px);
		}
		
		// play here ! 
		&:nth-child(1) {
			&,
			&::after {
				background-color: #21D4FD;
				background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
			}
		}
		&:nth-child(2) {
			&,
			&::after {
				background-color: #FFE53B;
				background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
			}
		}
		&:nth-child(3) {
			&,
			&::after {
				background-color: #08AEEA;
				background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
			}
		}	
		&:nth-child(4) {
			&,
			&::after {
				background-color: #FEE140;
				background-image: linear-gradient(90deg, #FEE140 0%, #FA709A 100%);
			}
		}	
		&:nth-child(5) {
			&,
			&::after {
				background-color: #85FFBD;
				background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
			}
		}	
		&:nth-child(6) {
			&,
			&::after {
				background-color: #4158D0;
				background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
			}
		}	
		&:nth-child(7) {
			&,
			&::after {
				background-color: #FF9A8B;
				background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
			}
		}	
		&:nth-child(8) {
			&,
			&::after {
				background-color: #FF3CAC;
				background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
			}
		}
		&:nth-child(9) {
			&,
			&::after {
				background-color: #00DBDE;
				background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
			}
		}
		&:nth-child(10) {
			&,
			&::after {
				background-color: #FA8BFF;
				background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
			}
		}
		
	}
}

@keyframes heartbeat {
	from {
		
	}
	to {
		
	}
}