*
{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}
body{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
}
.clock{
	width: 350px;
	height: 350px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff url(clock.png);
	background-size: cover;
	border-radius: 50%;
	border: 20px solid #fff;
	box-shadow: inset 0 0 50px rgba(0,0,0,.2),
				0 20px 20px rgba(0,0,0,.2),
				0 0 0 4px rgba(255,255,255,.1);

}
.clock::before
{
	content: '';
	position: absolute;
	width: 15px;
	height: 15px;
	background: #848484;
	border: 2px solid #fff;
	z-index: 100000;
	border-radius: 50%;
}

.hour,
.min,
.sec
{
	position: absolute;
}
.hour, .hr{
	width: 160px;
	height: 160px;
}
.min, .mn{
	width: 190px;
	height: 190px;
}
.sec, .sc{
	width: 230px;
	height: 230px;
}
.hr,.mn,.sc{
	display: flex;
	justify-content: center;
	position: absolute;
	border-radius: 50%;
}
.hr::before{
	content: '';
	position: absolute;
	width: 8px;
	height: 80px;
	background: #848484;
	z-index: 10px;
	border-radius: 6px 6px 0 0;
}
.mn::before{
	content: '';
	position: absolute;
	width: 4px;
	height: 90px;
	background: #d6d6d6;
	z-index: 11px;
	border-radius: 6px 6px 0 0;
}
.sc::before{
	content: '';
	position: absolute;
	width: 2px;
	height: 155px;
	background: #ff6767;
	z-index: 12px;
	border-radius: 6px 6px 0 0;
}
p{
	font-size: 14px;
	margin-top: 60px;
	font-family:sans-serif;
	color:#848484;
}