* {
	margin:0;
	padding:0;
	list-style:none;
}
body {
	padding:20px;
}
#container {
	display:flex;
	flex-direction:column;
}
.ball-title {
	font-size:18px;
	font-weight:bold;
	color:red;
	text-align:center;
}
.ball-content {
	display:flex;
	flex-wrap:wrap;
}
.ball-list {
	width:40px;
	height:40px;
	border-radius:50%;
	border:1px solid #000;
	text-align:center;
	line-height:40px;
	font-size:16px;
	margin:6px;
	box-sizing:border-box;
	border:1px solid darkred;
}
.active {
	background:red;
	color:white;
}
#btn {
	cursor:pointer;
	display:block;
	margin:0 auto;
	margin-top:30px;
	width:100px;
	height:40px;
	border:none;
	box-shadow:red 4px 2px 20px;
}
.rank-content {
	margin-top:20px;
}
.rank-content {
	display:none;
}
.rank-lists > span {
	display:inline-block;
	width:26px;
	height:26px;
	border-radius:50%;
	border:1px solid red;
	text-align:center;
	line-height:26px;
	margin-right:8px;
}