/*! time.css | v26.0217 | time.alto-6.net */

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


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

body {
	margin:						15px;
	background:					#D1D8CD;

	color:						#1C231E;
	font-family:				monospace;
	font-size:					1.25rem;

	text-shadow:				3px 3px 1px rgba(64, 64, 64, .1);

	text-rendering:				optimizeLegibility;
}


a {
	color:						#1C231E;
	font-weight:				400;

	text-decoration:			underline;
	text-decoration-color:		#4A607A;
	text-decoration-style:		dotted;
	text-decoration-thickness:	2px;
	text-underline-offset:		3px;

	transition:					color .25s ease-in-out 0s;
}

a:hover {
	color:						#4A607A;
	text-decoration-color:		#1C231E;
}

strong, b {
	font-weight:				600;
}

hr {
	border:						none;
	border-top:					1px dotted #666;
	color:						#666;
	width:						50%;
	height:						0;
	margin: 					0 auto 1rem auto;
}

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

	padding:					4px 0 0 0;

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

	text-align:					center;
}


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

	font-size:					25px;

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

	text-align:					center;
}


.wrapper {
	margin:						40px auto;
	display:					flex;
	flex-direction:				column;

	max-width:					400px;

	align-items:				center;
	justify-content:			center;
	gap:						40px;
}

.lcd {
	display:					block;
	position:					relative;

	padding:					8px 0 0 0;

	font-family:				"Premier", sans-serif;
	font-size:					106px;
	font-variant-numeric:		tabular-nums;	/* Keeps numbers from "wiggling" as they change */
	letter-spacing: 			2px;

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

	text-shadow:				none;
}

.lcd-num {
	color:						#C4CBC0;
	opacity:					.5;
}

.absolute {
	display:					block;
	position:					absolute;

	inset:						0 0 0 0;

	padding:					8px 0 0 0;
}

#node-time, #local-time {
	color:						#ce453e;

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

.zones {
	padding:					0 5px 0 0;
	font-size:					15px;
	text-align:					right;
}


.tech-info {
	color:						#34403A;
}

.tech-info p {
	margin:						0 0 1em 0;
	padding:					2px 0 0 0;

	font-size:					19px;

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

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

#running {
	will-change:				contents;
	transform:					translateZ(0);

	font-variant-numeric:		tabular-nums;	/* Keeps numbers from "wiggling" as they change */
}

.counter-row {
	margin:						0 0 2px 0;
	padding:					0;

	display:					flex;
	justify-content:			space-between;

	font-size:					15px;

	will-change:				contents;
	transform:					translateZ(0);
}


.footer {
	display:					block;

	font-size:					14px;
	letter-spacing:				normal;
	line-height:				normal;

	text-align:					center;
}

.footer p {
	margin:						0 0 2px 0;
}

/* ================================================================== */
@media only screen and (min-height:1024px) and (min-width: 800px) {
	h1 {
		padding:					32px 0 0 0;
	}

	.footer {
		position:					fixed;
		display:					flex;
		z-index:					20;

		inset:						auto 0 8px 0;

		font-size:					14px;
		letter-spacing:				normal;
		line-height:				normal;

		justify-content:			center;
	}

	.footer p {
		margin:						0;
	}
}

@media only screen and (min-width: 800px) {
	h1 {
		font-size:					56px;
	}

	.wrapper {
		margin:						32px auto;
		max-width:					600px;
		gap:						32px;
	}

	.lcd {
		font-size:					148px;
		letter-spacing:				4px;
	}

	.zones {
		padding:					0 8px 0 0;
	}

	.counter-row {
		font-size:					18px;
	}
}