/* Most of the look lives in the HTML itself, as was the custom in 1997.
   This file only covers what browsers no longer do on their own. */

body {
  margin: 8px;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
}

img { image-rendering: pixelated; }

table.main {
  width: 640px;
  max-width: 100%;
  table-layout: fixed; /* lets .scroll shrink instead of pushing the table wider */
}

.logo {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(26px, 8vw, 52px);
  letter-spacing: 2px;
  color: #ffd800;
  text-shadow: 3px 3px 0 #dd0000, 6px 6px 0 #000;
  overflow-wrap: anywhere;
  margin-bottom: 12px;
}

/* Wide tables scroll inside the page on phones. */
.scroll { overflow-x: auto; }

.hazard {
  height: 12px;
  margin: 12px 0;
  background: url("images/hazard.gif") repeat-x;
}

.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 110px;
  background: #c0c0c0;
  border: 2px inset #fff;
  color: #000;
  font-family: "Courier New", monospace;
  font-size: 13px;
  text-align: center;
}

/* <BLINK> was removed from browsers, so we bring it back by force. */
blink { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

.bubble {
  position: fixed;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd800;
  pointer-events: none;
  animation: float 700ms linear forwards;
}
@keyframes float { to { transform: translateY(-36px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  body { background-image: none !important; }
  blink { animation: none; }
  .hazard { background: #ffd800; }
}