body {
	margin:0;
	height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:deepskyblue;
	background-image:linear-gradient(to top,skyblue,deepskyblue);
}
.clock {
	width:10em;
	height:10em;
	font-size:32px;
	border-radius:50%;
	border:.3em solid rgba(0,0,0,.5);
	box-shadow:0 0 1em .3em rgba(255,255,255,.5),0 0 1em .3em rgba(9,9,9,.6) inset;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
}
.clock::before {
	content:"";
	position:absolute;
	z-index:-1;
	top:4.85em;
	left:0;
	width:1em;
	height:.3em;
	border-radius:.2em;
	background-color:slategray;
	box-shadow:9em 0 0 0 slategray;
}
.clock::after {
	content:"";
	position:absolute;
	z-index:-1;
	top:0;
	left:4.85em;
	width:.3em;
	height:1em;
	border-radius:.2em;
	background-color:slategray;
	box-shadow:0 9em 0 0 slategray;
}
#hours {
	width:.45em;
	height:3.5em;
	position:absolute;
	top:2em;
	background:#fff;
	border-radius:.2em;
	transform-origin:.225em 3em;
	transform:rotate(0deg);
}
#hours::after {
	content:'';
	position:absolute;
	top:2.6em;
	left:-.225em;
	width:.9em;
	height:.9em;
	border-radius:50%;
	background-image:radial-gradient( black 30%,white);
}
#minutes {
	width:.25em;
	height:4.5em;
	position:absolute;
	top:1.25em;
	background:#000;
	border-radius:.2em;
	transform-origin:.125em 3.75em;
	transform:rotate(0deg);
}
#seconds {
	width:.1em;
	height:6em;
	position:absolute;
	z-index:2;
	top:0.25em;
	background:red;
	border-radius:.2em;
	transform-origin:.05em 4.75em;
	transform:rotate(0deg);
}
#seconds::after {
	content:'';
	position:absolute;
	top:4.6em;
	left:-.1em;
	width:.3em;
	height:.3em;
	border-radius:50%;
	background-color:red;
}