@font-face {
	font-family: clock;
	src: local(clock), url('alarmclock.ttf') format('opentype');
}

html {
	font-size: 1.1vw;
	margin: 0;
	padding: 0;
}

body {
	background-color: black;
	color: #00cc00;
	font-family: 'Roboto Mono', monospace;
	margin: 0;
	padding: 0;
}

.clocks {
	margin: 0;
	padding: 0;
	/* clearfix */
	content: "";
	clear: both;
	display: table;
}

.clock {
	box-sizing: border-box;
	float: left;
	width: 50%;
	padding: 1rem;
	margin: 0;
}

.label {
	font-size: 2.5rem;

}

.time {
	font-size: 10rem;
	font-family: clock;
	text-align: center;
}

.date {
	font-size: 1.4rem;
}

.zone {
	float: left;
	font-size: 1.4rem;
}

.zone:after {
	content: "•";
	padding-right: 0.4em;
	padding-left: 0.4em;
}

.scene {
	color: #cc0000;
}

.footer {
	position: fixed;
	z-index: 10;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0.4rem;
	background-color: black;
	font-size: 0.6rem;
	float: left;
	text-align: center;
	color: #006600;
}

.footer1 {
	display: inline-block;
	float: left;
}

.footer2 {
	display: inline-block;
}

.footer3 {
	display: inline-block;
	float: right;
}