@import url('https://fonts.googleapis.com/css?family=Orbitron');


*, *:before, *:after {
	box-sizing: border-box;
	outline: none;
}

/* html {
	font-family: 'Courier New', monospace;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	color: #444;
}

body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
} */

.alarm-clock {
	position: relative;
	padding: 10px;
	border-radius: 10px;
	background-color: tan;
}
.alarm-clock .date {
		position: absolute;
		bottom: 15px;
		left: 50%;
		color: white;
		font-size: 12px;
		text-transform: uppercase;
		transform: translateX(-50%);
		z-index: 9;
	}
	
	.alarm-clock  .time {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px 40px 15px;
		background-color: #333;
		border-radius: 10px;

		font-family: 'Orbitron', sans-serif;
		/* //font-family: 'Menlo', monospace; */
		font-size: 52px;
	}
	.alarm-clock .time	span {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			color:#e74c3c;
			text-shadow: 0 0 15px rgba(#e74c3c,0.4);
			line-height: 1.75;


		}
		:nth-of-type(5) {
			width: 90px;
		}
		.alarm-clock	.colon {
			width: 12px;
			text-align: center;
			animation: blink 2s infinite;
		}
	




@keyframes blink {
	0%   { opacity: 0; }
	30%  { opacity: 1; }
	50%  { opacity: 0; }
	70%  { opacity: 1; }
	100% { opacity: 0; }
}