*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html{
	font-size: 62.5%;
}
:root{
	--bg_clr: #34495e;
	--white: #ffffff;
	--bb1: #f39c12;
	--bb2: #16a085;
	--bb3: #e74c3c;
	--bb4: #8e44ad;
	--bb5: #27ae60;
}
.center_div{
	width: 100vw;
	height: 100vh;
	background: var(--bg_clr);
	display: flex;
	justify-content: center;
	align-items: center;
}
ul{
	display: flex;
	border-bottom: 5px solid var(--white);
}	

ul li{
	width: 3rem;
	height: 3rem;
	background: currentColor;
	list-style-type: none;
	margin: 0 10px;
	border-radius: 50%;
	animation: buncy 1s linear infinite;
}
@keyframes buncy{
	0%{
		transform: translateY(0);
	}
	50%{
		transform: translateY(-15rem);
	}
	100%{
		transform: translateY(0);
	}
}
ul li:nth-child(1){
	animation-delay: 0.2s;
}
ul li:nth-child(2){
	animation-delay: 0.6s;
}
ul li:nth-child(3){
	animation-delay: 0.4s;
}
ul li:nth-child(4){
	animation-delay: 0.8s;
}
ul li:nth-child(5){
	animation-delay: 0.4s;
}