body {
	color: white;
	background: black;
	image-rendering: pixelated;
}

#root-container {
	margin: auto;
	text-align: center;
	width: min-content;
}

.content {
	margin-top: 0.75em;
}

.grey {
	color: #ddd !important;
}

img {
	width: 100%;
}

hr {
	border: none;
	height: 1px;
	background-color: #333;
  margin-bottom: 1em;
}

/* Program */

#program {
  line-height: var(--line-height);
}

.program-entry {
  position: relative;
}

.program-progress {
  display: inline-block;
  background: #006688;
  height: calc(var(--line-height) * 0.8333);;
  margin-top: calc(var(--line-height) * 0.0833);
  position: absolute;
  left: 0;
  overflow: hidden;
  transform: translate(-0.25em); /* Add some spacing for text inset */
}

.program-text {
  position: absolute;
}

.program-text > * {
  float: left;
  white-space: preserve-spaces;
}

.program-spacer {
  color: #1a4047;
}

.rainbow {
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 154, 0, 1) 10%,
    rgba(208, 222, 33, 1) 20%,
    rgba(79, 220, 74, 1) 30%,
    rgba(63, 218, 216, 1) 40%,
    rgba(47, 201, 226, 1) 50%,
    rgba(28, 127, 238, 1) 60%,
    rgba(95, 21, 242, 1) 70%,
    rgba(186, 12, 248, 1) 80%,
    rgba(251, 7, 217, 1) 90%,
    rgba(255, 0, 0, 1) 100%
  );
  opacity: 0.8;
}

.egg::after {
  content: "🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚🥚";
  opacity: 0.33;
}

.radio::after {
  content: "📻📻📻📻📻📻📻📻📻📻📻📻📻📻📻📻📻📻📻📻📻📻📻📻📻📻📻📻";
  opacity: 0.33;
}

.ctf::after {
  content: "🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩";
  opacity: 0.33;
}