@media (min-aspect-ratio: 16/9) {
	.clock-grid{
		height: calc(100% / 6);
		width: calc(96vh*2);
		margin:0 auto;
	}
	.clock-container{
		height:100%;
	}
}

@media (max-aspect-ratio: 16/9) {
	.clock-grid{
		height: calc(100vw / 12);
		width: 100%;
	}
	.clock-container{
		position: absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		margin:auto;
		height:50vw;
	}
}

html, body {
	margin:0;
	height:100%;
	background-color: #F5F2D0;
}

.clock-grid {
	display:flex;
	background-color: #F5F2D0;
}

.hour {
	flex:1 1 0px;
	border-radius:50%;
	opacity: 0;
	color: rgba(0,0,0,0);
	text-align: center;
	background-color: #D9001B;
}

.minute {
	flex:1;
	border-radius:100%;
	opacity: 0;
	color: rgba(0,0,0,0);
	text-align: center;
}

@keyframes backgroundkeyframes
{
	0%	{background:#2695FF;}
	10%	{background:#3087DB;}
	20%	{background:#24A0E4;}
	30%	{background:#53B5EA;}
	40%	{background:#73BEE7;}
	50%	{background:#97E9F7;}
	60%	{background:#70DCF0;}
	70%	{background:#5AC4DF;}
	80%	{background:#52BCEE;}
	90%	{background:#66AAEB;} 	
	100%{background:#52A1EC;} 		
}
@-webkit-keyframes backgroundkeyframes
{
	0%	{background:#2695FF;}
	10%	{background:#3087DB;}
	20%	{background:#24A0E4;}
	30%	{background:#53B5EA;}
	40%	{background:#73BEE7;}
	50%	{background:#97E9F7;}
	60%	{background:#70DCF0;}
	70%	{background:#5AC4DF;}
	80%	{background:#52BCEE;}
	90%	{background:#66AAEB;} 	
	100%{background:#52A1EC;} 		
}