.online {
  width:100%;
  text-align:center;
  border-bottom:1px solid #000;
  line-height:0.1em;
  margin:10px 0 -10px;
}

.online span {
  background:#fff;
  padding:0 10px;
  font-family:monospace;
  font-style:italic;
}

.wait {
  margin-top:30em;
}

.catch_area {
  display:block;
  height:150px;
}

.catch_item {
  white-space:nowrap;
  display:inline
}

.stack_container {
  display:block;
}

.stack_pre {
  vertical-align:top;
}

.stack {
  display:inline;
  writing-mode:vertical-rl;
  text-orientation:upright;
}

.stack_post {
  vertical-align:bottom;
}

/* https://css-tricks.com/creating-realistic-reflections-with-css/ */
/* https://stackoverflow.com/questions/349322/using-css-to-duplicate-html-elements */
.mirror:after {
  content:attr(title);
  transform: rotatex(180deg) translatex(-100%);
  transform-origin: bottom right;
  display:inline-block;
  position: absolute; /* https://stackoverflow.com/questions/24926791/overlay-text-using-css-after */
}

/* https://www.bennadel.com/blog/4536-creating-a-marquee-effect-with-css-animations.htm */
.marquee {
  overflow:hidden;
  white-space:nowrap;
  display:flex;
}

.marquee_item {
  animation:marquee 30s linear infinite;
}

.marquee:hover .marquee_item {
  animation-play-state:paused;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

.yes1 {font-size:1.0em}
.yes2 {font-size:1.4em}
.yes3 {font-size:1.8em}

@font-face {
  font-family:"scary";
  src:url("youmurdererbb_reg.woff2");
}

.scary {
  font-family:scary, serif;
  font-size:3em;
}

.package_grid {
  display:grid;
  grid-template:repeat(2, auto) / repeat(2, auto);
  gap:10px 10%;
  place-items:center;
  place-content:center;
}

.package_grid_item {
  max-width:3em;
}