/*! time.css | v26.0217 | krakoukass.org */
/* == Fonts ================================================================= */

/* -- Premier 2019 ---------------------------------------------------------- */
@font-face {
	font-family:	"Premier";
	font-style:		normal;
	font-weight:	400;
	src:			url("../fonts/fixed-premier.woff2")		format('woff2'),
					url("../fonts/fixed-premier.woff")		format('woff'),
					url("../fonts/fixed-premier.ttf")		format('truetype');
	font-display:	block;
}

*, *::before, *::after {
	margin:						0;
	padding:					0;
	box-sizing:					border-box;
}

html {
	width:						100%;
	height:						100%;
	color-scheme:				dark;
}

body {
	margin:						16px 16px;

	background:					#202020 url("/images/bgNoise.png");

	color:						#ffffff;
	font-family: 				monospace;
	font-size:					1.25rem;

	text-rendering:				optimizeLegibility;
}

/* -- Some common tag classes... -------------------------------------------- */
a, a:link, a:visited, a:active {
	color:						#ffbb00;
	text-decoration:			none;
	transition:					color .25s ease-in-out 0s;
}

a:hover {
	color:						#ffffff;
}


h1 {
	font-family: 				"Premier", sans-serif;
	font-size:					84px;

	letter-spacing:				2px;
	line-height:				0.85;

	text-align:					center;
}

h2, h3 {
	padding:					0 0 8px 0;

	color:						#eee;
	font-size:					24px;

	letter-spacing:				normal;
	line-height:				normal;

	text-align: 				center;
}


h1 span {
	color:						#ce453e;
	padding:					0 2px 0 0;
}



#main {
	display: 					block;
	margin:						0 auto;
}

#header {
	margin:						0 0 64px 0;
}

.horizontal {
	display:					flex;
	gap:						40px;

	position:					absolute;

	top:						50%;
	left:						50%;
	transform:					translate(-50%, -50%);

	justify-content:			center;
}

.clocks {
	display:					block;
}

.info {
	display:					block;
	width:						400px;
}

.info p {
	margin:						0 0 24px 0;

	color:						#ccc;
	font-size:					21px;

	text-align:					justify;
	hyphens:					auto;
	word-break:					break-word;
	overflow-wrap:				break-word;

	letter-spacing:				normal;
	line-height: 				1.3;
}

.info strong, .info b {
	color:						#ddd;
	font-weight:				bold;
}


#srv_time {
	margin:						8px 0 32px 0;

	will-change:				contents;		/* Tells the browser to optimize for frequent updates */
	transform:					translateZ(0);	/* Forces GPU acceleration */

	color:						#ce453e;
	font-family: 				"Premier", sans-serif;
	font-size:					128px;
	font-variant-numeric:		tabular-nums;	/* Keeps numbers from "wiggling" as they change */

	line-height:				.85;
	text-align:					center;
}



#lcl_time {
	margin:						8px 0 0 0;

	will-change:				contents;		/* Tells the browser to optimize for frequent updates */
	transform:					translateZ(0);	/* Forces GPU acceleration */

	color:						#ce453e;
	font-family: 				"Premier", sans-serif;
	font-size:					128px;
	font-variant-numeric:		tabular-nums;	/* Keeps numbers from "wiggling" as they change */

	line-height:				.85;
	text-align:					center;
}


#running {
	will-change:				contents;		/* Tells the browser to optimize for frequent updates */
	transform:					translateZ(0);	/* Forces GPU acceleration */
	font-variant-numeric:		tabular-nums;	/* Keeps numbers from "wiggling" as they change */

/*	white-space:				nowrap; */
}


#site_footer {
	position:					fixed;
	display:					flex;
	z-index:					20;

	inset:						auto 0 12px 0;

	font-size:					16px;
	color:						#bbb;
	letter-spacing:				1px;
	line-height: 				normal;

	justify-content:			center;
}

#site_footer p {
	display:					inline;
	padding:					0 4px 0 4px;

	font-size:					13px;
	letter-spacing: 			normal;
	line-height: 				normal;
}

/* ========================================================================== */
@media only screen
and (max-height:600px) {

	.horizontal {
		display:					flex;
		gap:						32px;

		position:					relative;

		top:						unset;
		left:						unset;
		transform:					unset;

		justify-content:			center;
	}

	#site_footer {
		position:							relative;
		display:							block;

		left:								unset;
		right:								unset;
		bottom:								unset;

		margin:								64px 0 0 0;

		text-align: 						center;
		justify-content: 					unset;
	}
}


@media only screen
and (max-width:900px) {

	h1 {
		font-size:					60px;
	}

	#main {
		max-width:					400px;
	}

	#header {
		margin:						0 0 32px 0;
	}

	.horizontal {
		display:					block;
		width:						100%;

		position:					relative;

		top:						unset;
		left:						unset;
		transform:					unset;

		justify-content:			center;
	}


	#srv_time, #lcl_time {
		width:						auto;
		font-size:					114px;
	}

	.info {
		width:						auto;
		margin:						32px 0 0 0;
	}

	.info p {
		font-size:					17px;
	}

	#site_footer {
		position:					relative;
		display:					block;

		left:						unset;
		right:						unset;
		bottom:						unset;

		margin:						32px 0 0 0;

		text-align: 				center;
		justify-content: 			unset;
	}

	#site_footer p {
		display:					block;
		padding:					0 0 4px 0;
	}
}