@font-face {
  font-family: "longpixelfont";
  src: url('fonts/longpixelfont.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: "lesspixelfont";
  src: url('fonts/lesspixelfont.woff') format('woff');
  font-display: swap;
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
body {
  background-color: white;
  color: black;
  font-family: "longpixelfont", ms pgothic, ms ui gothic, simsun, arial, sans-serif;
  -webkit-font-smoothing: none;
  font-smooth: never;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.5rem;
  gap: 0px;
}

.highlight {
  color: red;
  text-decoration: underline;
  font-size: 2.5em;
}
.warning-img {
  max-width: 100px;
  display: block;
  animation: spin 4s linear infinite;
  -webkit-user-drag: none;
  user-select: none;
}
.draggable {
  position: fixed;
  cursor: grab;
  width: fit-content;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 1;
}
.draggable:active {
  cursor: grabbing;
}
#toggleTableBtn {
  position: relative;
  z-index: 3;
}
#tablePanel {
  position: relative;
  z-index: 2;
  background-color: white;
}
.sunken-panel {
  height: 200px;
  width: 200px;
  display: none;
}
table.interactive td {
  font-size: 1.1em;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.rainbow-link {
  color: black;
  text-decoration: none;
}
.rainbow-link:hover {
  animation: rainbow-glow 2s linear infinite;
}
@keyframes rainbow-glow {
  0%   { color: red;    text-shadow: 0 0 8px red; }
  16%  { color: orange; text-shadow: 0 0 8px orange; }
  33%  { color: yellow; text-shadow: 0 0 8px yellow; }
  50%  { color: lime;   text-shadow: 0 0 8px lime; }
  66%  { color: cyan;   text-shadow: 0 0 8px cyan; }
  83%  { color: blue;   text-shadow: 0 0 8px blue; }
  100% { color: violet; text-shadow: 0 0 8px violet; }
}
.custom-tooltip {
  position: fixed;
  background: #333;
  color: #fff;
  font-style: normal;
  font-family: "lesspixelfont", monospace;
  text-shadow: 1px 1px 0 black;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.15s ease;
  width: 260px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  box-sizing: border-box;
}
.custom-tooltip.visible {
  opacity: 1;
}
.special-text1 {
  font-family: "lesspixelfont", sans-serif;
}