body {
	background-color:#333;
	margin:0;
	padding:0;
}
.container {
	width:500px;
	height:500px;
	position:relative;
}
.container > div {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	box-sizing:border-box;
	border-radius:50%;
}
.month {
	width:500px;
	height:500px;
	border:20px solid #eea2a4;
}
.date {
	width:400px;
	height:400px;
	border:20px solid #ad6598;
}
.hour {
	width:300px;
	height:300px;
	border:20px solid #2177b8;
}
.minute {
	width:200px;
	height:200px;
	border:20px solid #68b88e;
}
.second {
	width:100px;
	height:100px;
	border:20px solid #fcc515;
}
.left,.right {
	width:calc(50% + 20px);
	height:calc(100% + 40px);
	position:absolute;
	top:-20px;
	overflow:hidden;
}
.left {
	left:-20px;
}
.right {
	right:-20px;
}
.cir {
	width:200%;
	height:100%;
	border-radius:50%;
	box-sizing:border-box;
	transform:rotate(-45deg);
	color:#fff;
	line-height:0;
}
.left .cir {
	border-left:20px solid #333;
	border-top:20px solid #333;
	border-right:20px solid transparent;
	border-bottom:20px solid transparent;
	text-align:left;
}
.right .cir {
	position:relative;
	left:-100%;
	border-left:20px solid transparent;
	border-top:20px solid transparent;
	border-right:20px solid #333;
	border-bottom:20px solid #333;
	text-align:right;
}
.text {
	width:20px;
	height:calc(50% + 20px);
	color:#fff;
	position:absolute;
	left:50%;
	margin-left:-10px;
	top:-20px;
	box-sizing:border-box;
	transform-origin:bottom;
}