@keyframes animate {

	0%,
	100% {
		transform: translateY(10px);
	}

	50% {
		transform: translateY(-10px);
	}
}

.clock_container {
	position: absolute;
	top: 157px;
	right: 30px;
	z-index: 10;
}

.box {
	position: relative;
	z-index: 1;
	width: 280px;
	height: 280px;
	backdrop-filter: blur(25px);
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	animation: animate 5s ease-in-out infinite;
	animation-delay: -2.5s;
}

.clock {
	position: absolute;
	top: 6px;
	left: 6px;
	right: 6px;
	bottom: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: radial-gradient(transparent, rgba(255, 255, 255, 0.2)), url(../images/clock.png);
	background-size: cover;
	border-radius: 50%;
	backdrop-filter: blur(25px);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-bottom: none;
	border-right: none;
	box-shadow: -10px -10px 20px rgba(255, 255, 255, 0.1),
		10px 10px 20px rgba(0, 0, 0, 0.1),
		0px 40px 50px rgba(0, 0, 0, 0.2);

}

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

.hour,
.min,
.sec {
	position: absolute;
}

.hour,
.hr {
	width: 150px;
	height: 150px;
}

.min,
.mn {
	width: 170px;
	height: 170px;
}

.sec,
.sc {
	width: 180px;
	height: 180px;
}

.hr,
.mn,
.sc {
	display: flex;
	justify-content: center;
	position: absolute;
	border-radius: 50%;
}

.hr::before {
	content: '';
	position: absolute;
	width: 8px;
	height: 80px;
	background: #ff105e;
	z-index: 11;
	border-radius: 6px;
}

.mn::before {
	content: '';
	position: absolute;
	width: 4px;
	height: 90px;
	background: #ffffff;
	z-index: 12;
	border-radius: 6px;
}

.sc::before {
	content: '';
	position: absolute;
	width: 2px;
	height: 120px;
	background: #ffffff;
	z-index: 12;
	border-radius: 6px;
}