@import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed|PT+Sans+Narrow|Share+Tech+Mono');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Roboto+Mono:wght@500&display=swap');
body
{
	background-color: var(--bg);
	color: var(--one);
	font-family: 'Barlow Semi Condensed', sans-serif;
}
a
{
	text-decoration: none;
	color: var(--one);
}
:root {
	--one: #cf3c3c;
	--two: #1A426A;
	--three: #141C17;
	--four: #51534d;
	--bg: #363636;
}
body
{
	font-size: 250%;
	font-weight: bold;
}
body,html
{
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}
#wrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0
}
.bar {
  font-size: 125%;
	margin: 0;
	padding: 0;
	height: calc(100%/5);
	display: flex;
	justify-content: center;
	align-items: center;
	background-size: 100%;
	background-repeat: no-repeat;
}
#banner {
	flex-direction: column;
	color: var(--one);
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	user-select: none;
}
/* text-indent offsets the trailing letter-space so the lines stay optically centered */
#banner .bannerLine {
	color: #ffaa00;
	font-size: clamp(0.7rem, min(2.9vw, 3.4vh), 1.7rem);
	letter-spacing: 0.38em;
	text-indent: 0.38em;
}
#banner .bannerCall {
	font-size: clamp(2rem, min(12vw, 14vh), 7.5rem);
	letter-spacing: 0.05em;
	text-indent: 0.05em;
	margin: 0.04em 0;
}
#link-prop:hover {
	background: url(images/prop.svg);
}
#link-log:hover {
	background: url(images/log.svg);
	/* the map is dark now, so the label lifts off it instead of cutting into it */
  color: var(--one);
}
#link-hof:hover {
	background: url(images/halloffame.svg);
	/* the plaque art is dark, so the label stays in the accent red */
  color: var(--one);
}
#link-solar:hover {
	background: url(images/solar.svg);
  color: var(--bg);
}
#link-exam:hover {
	background: url(images/exam.svg);
}
.preload
{
	height: 1px;
	width: 1px;
	opacity: 0%;
}
#searchpage
{
	box-sizing: border-box;
	max-width: 34rem;
	margin: 0 auto;
	padding: 1.25rem 1rem;
	/* fluid type: scales with the viewport, capped for large screens */
	font-size: clamp(1rem, 5vw, 1.9rem);
	font-weight: bold;
}
form.searchline
{
	margin: 0 0 0.9em 0;
}
.searchline
{
	display: flex;
	align-items: center;
	gap: 0.35em;
	width: 100%;
	box-sizing: border-box;
}
.searchlabel
{
	flex: 0 0 auto;
	width: 6.5em;
	font-size: 0.75em;
	text-align: left;
	white-space: nowrap;
}
.searchinput
{
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	height: 2em;
	padding: 0 0.4em;
	text-transform: uppercase;
	font-size: 0.9em;
}
.searchbutton
{
	flex: 0 0 auto;
	font-size: 1.4em;
	line-height: 1;
	padding: 0 0.2em;
	border: 0;
	background-color: transparent;
	color: var(--one);
	cursor: pointer;
}
.searchsep
{
	border: 0;
	border-top: 1px solid var(--four);
	margin: 0.4em 0 1.1em 0;
}
#searchlinks
{
	display: flex;
	justify-content: space-between;
	width: 100%;
	font-size: 0.9em;
}
#searchlinks a:hover
{
	color: #000;
}
.ticker {
  background-color: #363636;
  font-family: 'Roboto Mono', monospace;
  font-size: 70%;
}
.subticker{
	margin: 0;
	padding: 0;
	width: calc(100%/3);
	justify-content: center;
	align-items: center;
  text-align: center;
}
.tickerDigit {
  font-size: 130%;
  transition: color 200ms ease-out;
}
.tickerDigit .digit {
  display: inline-block;
  transform-origin: 50% 50%;
  transition: transform 30ms ease-in-out;
}
.tickerDigit.flipping .digit {
  transform: scaleY(0.05);
}
.tickerIdleDigit {
  color: #4b4b4b;
}
.tickerActiveDigit {
  color: #ffaa00;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .tickerDigit,
  .tickerDigit .digit {
    transition: none;
  }
  .tickerDigit.flipping .digit {
    transform: none;
  }
}