@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');

#info-container {
  font-family: 'JetBrains Mono', 'Fira Code', 'Noto Sans Mono', monospace;
}
body {
  background-color: #000000;
  color: #5fb8f2; /* Argentinian Blue */
  font-family: "Route 159", "Roboto Mono", "Courier New", monospace;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

#canvas-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 10vh;
  margin-bottom: 5vh;
  flex-shrink: 0;
}

#info-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 10vh;
  animation: fadeIn 2s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

pre {
  white-space: pre;
}

#spinner {
  /*
  Base size increased for visibility.
  Responsive scaling: 2vw ensures it grows with screen width.
  Max size 22px prevents horizontal scrolling on 1920px (80 cols * 22px = 1760px).
  Min size 8px for mobile backup (though scrolling will occur).
  */
  font-size: clamp(8px, 1.1vw, 22px);
  line-height: 1.0;
}

#info {
  display: inline-block;
  text-align: left;
  /* Default for large screens (>1680px) */
  font-size: 46px;
  line-height: 1.0;
  font-weight: bold;
  padding: 0 1rem;
}

/*
"Phone" sizing (screens < 1680px).
Target: ~85% viewport width.
Math: (85vw / 65 chars) / ~0.6 aspect ratio ≈ 2.15vw
*/
@media (max-width: 1680px) {
  #info {
    font-size: clamp(10px, 2.15vw, 46px);
  }
}

pre {
  font-size: 10px;
  line-height: 10px;
  white-space: pre;
}