style.css

*{
	margin:0;
	padding: 0;
}

body{
	width: 100vw;
	height: 100vh;
	background: #c1c1c4;
	display: flex;
	justify-content: center;
	align-items: center;
}

#clock{
	width: 15rem;
	height: 15rem;
	background: url(imagecl.png);
	background-size: 100%;
	border-radius: 50%;
}
.clock1{
	box-shadow: -8px -8px 20px #e1e1e4,
	8px 8px 20px #727276,
	inset -4px -4px 20px #e1e1e4,
	inset 4px 4px 20px #727276;
}
.clock2{
	box-shadow: -8px -8px 20px #2b2a2b,
	8px 8px 20px #050205,
	inset -4px -4px 20px #2b2a2b,
	inset 4px 4px 20px #050205;
}
#bt{
	position: absolute;
	bottom: 20%;
	padding: 10px 15px;
	background: #111;
	color: #eee;
	font-size: 1rem;
	letter-spacing: 2px;
	border-radius: 2%;
	font-weight: 600;
	border:none;

}

#center{margin:0px;
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background: #212;
	position: absolute;
	transform:translate(-50%, -50%);
	left:50%;
	top: 50%;
	z-index:4;
}

#hour,#minute,#second{
	transform-origin: bottom;
	z-index: 2;
	position: absolute;
	transform:translateX(-50%);
	left: 50%;
	bottom: 50%;

}
#hour{
	width: 0.35rem;
	height: 3rem;
	background: #ed1256;
	border-radius: 20%;

}
#minute{
	width: 0.2rem;
	height: 4rem;
	background: #1290ff;
	border-radius: 20%;

}
#second{
	width: 0.15rem;
	height: 5rem;
	background: #1f221e;
	border-radius: 20%;

}