body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  display: flex;
  flex: 1;
  /* Allow columns to take up remaining height */
}

.column {
  flex: 1;
  /* Equal width for columns */
  padding: 20px;
}

.column-dark {
  background-color: #1b2333;
  color: white;
}

.column-light {
  background-color: white;
  color: #0e1525;
}

h1 {
  text-align: center;
  font-weight: bold;
  font-size: 4.5em;
}

.queue-numbers {
  display: flex;
  flex-wrap: wrap;
  height: calc(100% - 200px);
  overflow-y: hidden;
}

.number {
  font-weight: bold;
  margin: 1px;
  flex: 0 0 48.333%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 4em;

  /* TODO: How to make the font fluid, clamp? */
}

footer {
  background-color: #FFF1E2	;
  color: #000;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  font-size: 1.5em;
  /* Adjust the base font size of the footer */
}