/** 
***	Site Web Source : https://codepen.io/IanWoodard/pen/GROdWrq
**/

.clock {
	position: absolute;
	width: 300px;
	height: 300px;
	left: 50%;
	top: 40px;
	margin-left: -150px;
	background-color: transparent;
	border-radius: 50%;
	border: 8px solid rgb(240, 240, 240);
	color: rgb(220, 220, 220);
}

.hour-hand {
	position: absolute;
	height: 100px;
	width: 7px;
	background-color: rgb(160, 160, 160);
	left: calc(50% - 3.5px);
	bottom: 50%;
	transform-origin: center 100%;
	z-index: 30;
}

.hour-hand::after {
	content: "";
	width: 7px;
	height: 10px;
	background-color: rgb(160, 160, 160);
	position: absolute;
	bottom: -10px;
	z-index: 30;
}

.minute-hand {
	position: absolute;
	height: 140px;
	width: 4px;
	background-color: rgb(160, 160, 160);
	left: calc(50% - 2px);
	bottom: 50%;
	transform-origin: center 100%;
	z-index: 20;
}

.minute-hand::after {
	content: "";
	width: 4px;
	height: 15px;
	background-color: rgb(160, 160, 160);
	position: absolute;
	bottom: -15px;
	z-index: 20;
}

.second-hand {
	position: absolute;
	height: 140px;
	width: 2px;
	background-color: rgba(0,175,170,1);
	left: calc(50% - 1px);
	bottom: 50%;
	transform-origin: center 100%;
	z-index: 10;
}

.second-hand::after {
	content: "";
	width: 2px;
	height: 15px;
	background-color: rgba(0,175,170,1);
	position: absolute;
	bottom: -15px;
	z-index: 10;
}

.circle {
	position: absolute;
	width: 12px;
	height: 12px;
	background-color: rgb(160, 160, 160);
	left: calc(50% - 6px);
	top: calc(50% - 6px);
	border-radius: 50%;
	z-index: 40;
}

.circle::after {
	content: "";
	width: 6px;
	height: 6px;
	background-color:  rgb(160, 160, 160);
	border-radius: 50%;
	position: absolute;
	left: calc(50% - 3px);
	top: calc(50% - 3px);
}

.digits {
	list-style: none;
	padding: 0;
	margin: 0;
}

.digit {
	position: absolute;
	width: 24px;
	height: 24px;
	font-size: 24px;
	/*font-family: Roboto, sans-serif;*/
	text-align: center;
	line-height: 24px;
}

.digit:nth-child(1) {
	top: 8%;
	right: 24%;
}

.digit:nth-child(2) {
	top: 24%;
	right: 8%;
}

.digit:nth-child(3) {
	right: 5px;
	top: calc(50% - 12px);
}

.digit:nth-child(4) {
	bottom: 24%;
	right: 8%;
}

.digit:nth-child(5) {
	bottom: 8%;
	right: 24%;
}

.digit:nth-child(6) {
	left: calc(50% - 12px);
	bottom: 5px;
}

.digit:nth-child(7) {
	bottom: 8%;
	left: 24%;
}

.digit:nth-child(8) {
	bottom: 24%;
	left: 8%;
}

.digit:nth-child(9) {
	left: 5px;
	top: calc(50% - 12px);
}

.digit:nth-child(10) {
	top: 24%;
	left: 8%;
}

.digit:nth-child(11) {
	top: 8%;
	left: 24%;
}

.digit:nth-child(12) {
	top: 5px;
	left: calc(50% - 12px);
}