main.css

body {
	display: grid;
	place-items: center;
   	background: #4d5863;
	font-family: monospace;
	transition: all .5s;
}
h1 {
	color: white;
	transition: all .5s;
}
.clock {
	color: white;
	margin-top: 50px;
	width: 250px;
	height: 250px;
	display: grid;
	place-items: center;
	background: black;
	border-radius: 200px;
	border: 7px solid #4dffff1a;
	transform: rotate(-90deg);
	transition: all .5s;
	box-shadow: 10px 10px 15px #ffffff30,
				-10px -10px 15px #00000070,
				inset 5px 5px 15px #FFFFFF30,
				inset -5px -5px 15px #FFFFFF30;
}
.clock span {
	transform: rotate(90deg);
	position: relative;
	right: -50px;
}
.clock div {
	width: 250px;
	height: 250px;
	background: transparent;
	position: absolute;
	display: grid;
	place-items: center;
	transition: all .4s;
}
.clock div .line {
	width: 90px;
	height: 8px;
	color: transparent;
	transition: .5s;
	border-radius: 10px;
	background: red;
	position: absolute;
	left: 50%;
	font-size: 7px;
	line-height: 5px;
}
.main:hover > .clock div .line {
	color: black;
	text-shadow: white 2px 2px 5px;
}
.main:hover > .clock .second-1 .s1 {
	background: red;
}
.clock div .center {
	background: red;
	width: 10px;
	height: 10px;
	border-radius: 10px;
}
.second-1 {
	animation: 1s run infinite ease-in-out;
	animation-delay: .5s;
}
.clock .second-1 .s1 {
	width: 10px;
	height: 20px;
	background: transparent;
	position: absolute;
	left: 12px;
}
.pos div {
	width: 10px;
	height: 8px;
	background: red;
	border-radius: 2px;
}
.pos {
	position: relative;
}
.p1 { left: 12px; }
.p2 { right: 12px; }
.p3 { top: 12px; }
.p4 { bottom: 12px; }
.p3 ,.p4 {
	transform: rotate(90deg);
}
@keyframes run {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(90deg);
	}
	50% {
		transform: rotate(180deg);
	}
	75% {
		transform: rotate(270deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.clock div .h {
	background: blue;
}
.clock div .m {
	background: #4fff4f;
}
.clock div .s {
	background: cyan;
}
@media only screen and (min-width: 750px) {
	.main {
		scale: 1.2;
	}
}