@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap');
*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
}
body
{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	/* background: #060a1f; */
    background: #060a1f;
}
.clock h2{
    font-size: 0.8em;
    color: white;
    text-align: center;
    margin: 20px 0;
    font-weight: 700;
    letter-spacing: 0.4em;
}
.time{
	position: relative;
    display: flex;
	
}
#hour,#seconds,#minutes{
	transform: translateX(-150vh);
}
#seconds{
	animation: clockAnimation 4.5s forwards;
}
#minutes{
	animation: clockAnimation 4.5s 2.5s forwards;
}
#hour{
	animation:clockAnimation 3.5s 4.5s forwards;
}

@keyframes clockAnimation {
	0%{
		transform: translateX(-100vh);
		
	}
	25%{
		transform:translateY(25px);
	}
	50%{
		transform:translateY(50px);
	}
	100%{
		transform: translateX(0);
		transform: translateY(0px);
	}
	
}
#hourText,#minutesText,#secondsText{
	animation:textAnimation 1s 5.5s forwards;
}

@keyframes textAnimation {
	from{
		transform: translateX(-100vh);
		filter: blur(5px);
		opacity: 0;
	}
	to{
		transform: translateX(0);
		filter: blur(0);
		opacity: 1;
	}
}

.clock .time div{
    margin: 0 5px;
    -webkit-box-reflect: below .5px linear-gradient(transparent,#0004);
}
.clock .time div span{
    border-radius: 10px;
    background-image: linear-gradient(270deg,#16E7CF,#00A89D);
    display: block;
    width: 167px;
    height: 153px;
	color: #51FFA4;
    font-weight: 700;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3.5em;
	z-index: 10;
	box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}

.clock .time div span:nth-child(2)
{
	height: 30px;
	font-size: 0.7em;
	letter-spacing: 0.2em;
	font-weight: 500;
	z-index: 9;
	background: #060a1f;
    color: white;
	text-transform: uppercase;
	opacity: 0;

}
.clock .time div:nth-last-child(1) span
{
    position: absolute;
	bottom: 0;
	width: 60px;
	height: 40px;
	font-size: 1.5em;
    margin: 0 15px;
	background: #fff;
	color: #000;
	
}
.clock .time div:nth-last-child(1){
    -webkit-box-reflect: below 4px linear-gradient(transparent,#0004);
}
#seconds{
	color:green;
}
@media screen and (max-width: 700px){
	.clock .time div:nth-last-child(1) span{
		position: absolute;
		top: 200px;
		right: 20px;
	}
	.clock .time div:nth-last-child(1)span{
		-webkit-box-reflect: none;
	}
	.clock .time div span{
		width: 140px;
	}
}