#clock-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10vw;
	text-align: center;
	font-weight: 200;
	z-index: 100;
	color: white;
	
	#date {
		font-size: 2vw;
	}
}

#clock {
	letter-spacing: 20px;
}

.gradient {
	background: linear-gradient(90deg,rgba(90, 237, 151, 1) 0%, rgba(176, 33, 237, 1) 30%, rgba(74, 169, 207, 1) 69%, rgba(90, 237, 151, 1) 100%);
	background-size: 200% auto;
	
	color: white;
	background-clip: text;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
	animation: gradient 1s linear infinite;
}

.purple .gradient {
	background: linear-gradient(90deg,rgba(255, 0, 255, 1) 0%, rgba(172, 5, 255, 1) 50%, rgba(255, 0, 255, 1) 100%);
	background-size: 200% auto;
	
	color: white;
	background-clip: text;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
	animation: gradient 1s linear infinite;
}

.sunset .gradient {
	background: linear-gradient(to top,rgb(247, 245, 234) 10%, rgb(255, 234, 117) 60%);
	background-size: 200% auto;
	
	color: white;
	background-clip: text;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
	animation: none;
}

@keyframes gradient {
	to {
		background-position: -200% center;
	}
}