@charset "UTF-8";
/* CSS Document */

body {
	background-color:black;
}

#container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
} 

#day, #daytime, #time, #datum {
	font-size: 6em;
	color: white;
	font-family: 'Helvetica Neue', sans-serif;
	xfont-family: 'Roboto', sans-serif;
	xfont-family: 'Patua One', cursive;
	xfont-family: 'Pacifico', cursive;
	xfont-family: 'Roboto Mono', monospace;
	text-align: center;
	line-height: 110%;
}

#daytime {
	font-size: 14em;
	color: white;
}

#time {
	font-size: 12em;
	color: red;
}

/*

@keyframes blink {  
  0% { color: red; }
  100% { color: black; }
}
@-webkit-keyframes blink {
  0% { color: red; }
  100% { color: black; }
}
.blink {
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
}

*/



@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}
.blink {
  animation: blink 1s step-start 0s infinite;
  -webkit-animation: blink 1s step-start 0s infinite;
}



/*

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

*/