@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@600&display=swap');
	
	body{
	  background-color: #252525;
	  padding:0;
	  margin: 0;
	  user-select: none;
	  overflow-x: hidden;
	}
	
	.clock{
		font-family: 'Cabin', sans-serif;
		color: #3c7dff;
		font-size: 80px;
		background: #333333;
		box-shadow: -5px 4px 0px,#1abc9c 2px -6px 0px;
		width: 240px;
		padding: 20px;
		border-radius: 20px 0px 0px 20px;
		transform: translate(500px, -250px);
	}
	
	#animation3{
	background: linear-gradient(#14CC49, #33C96A);
	width: 170px;
	height: 170px;
	border-radius: 100%;
	animation: blog1 infinte 2s towards ease;
	transform: translate(480px, -440px) rotate(40deg);
	}
	
	#animation2{
	background: linear-gradient(#EE8832, #EE5132);
	width: 170px;
	height: 170px;
	border-radius: 5px;
	animation: blog1 infinte 2s towards ease;
	transform: translate(-50px, 250px);
	}
	
	#animation1{
	background: linear-gradient(#3832EE, #264BAC);
	width: 170px;
	height: 170px;
	transform: translate(1250px, 210px);
	border-radius: 5px;
	animation: blog2 infinte 2s towards ease;
	}

function clockshow(){
		let date = new Date();
		const hour = date.getHours();
		var minutes = date.getMinutes();
		let seconds = date.getSeconds();
		
		var time = hour + "|:" + minutes + "|:" + seconds;
		const timeset = document.getElementById('mytime');
		setTimeout(clockshow,1000);
		
		timeset.innerText = time;
		timeset.innerContent = time;
	}
	clockshow();