#central-body {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	opacity: 1;
	transform: translate(-50%,-50%);
	transition:
				opacity var(--transition-speed),
				z-index var(--transition-speed);
}

#central-body.central-body-hide {
	z-index: 0;
	opacity: 0;
}

#clock {
	font-weight: bold;
	font-size: 88pt;
	color: var(--clock-color);
	white-space: nowrap;
	text-align: center;
	margin-bottom: 40px;
	text-shadow: 2px 2px #0A0A0A22;
	user-select: none;
	transition: font-size var(--transition-speed);
}

#search-container {
	width: 100%;
}

#search-box {
	background: var(--base-bg);
	color: var(--font-color);
	font-size: 14pt;
	text-align: center;
	position: relative; 
	left: 50%;
	transform: translateX(-50%);
	padding: 10px;
	border: none;
	border-radius: 24px;
	box-shadow:
				0 2.8px 2.2px rgba(0, 0, 0, 0.034),
				0 6.7px 5.3px rgba(0, 0, 0, 0.048),
				0 12.5px 10px rgba(0, 0, 0, 0.06),
				0 22.3px 17.9px rgba(0, 0, 0, 0.072),
				0 41.8px 33.4px rgba(0, 0, 0, 0.086),
				0 100px 80px rgba(0, 0, 0, 0.12);
	max-width: 100%;
	transition:
				max-width var(--transition-speed),
				font-size var(--transition-speed);
}

@media screen and (max-width: 550px) {
	#search-box {
		max-width: 70%;
		font-size: 14pt;
	}

	#clock {
		font-size: 70pt;
	}
}

@media screen and (max-width: 530px) {
	#search-box {
		max-width: 65%;
		font-size: 14pt;
	}

	#clock {
		font-size: 64pt;
	}
}

@media screen and (max-width: 515px) {
	#search-box {
		max-width: 60%;
		font-size: 14pt;
	}

	#clock {
		font-size: 48pt;
	}
}

@media screen and (max-width: 400px) {
	#search-box {
		max-width: 55%;
		font-size: 12pt;
	}

	#clock {
		font-size: 32pt;
	}
}

@media screen and (max-width: 360px) {
	#search-box {
		font-size: 11pt;
	}

	#clock {
		font-size: 30pt;
	}
}
