#fullscreen-container {
  width: 100%;
  height: 100%;
  max-width: 2560px;
  max-height: 1600px;
}

body {
  background-color: black; /* Set the background color of the body to black */
  color: white; /* Set the default text color to white */
  /* Set height and width as a ratio of 210x297 (A4 paper size) */
  height: 70vw;
  width: 100vw;
  /* Center the content */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  /* Prevent scrollbars */
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
#charButtons {
  display: grid;
  grid-template-columns: repeat(9, 1fr); /* 8 columns */
  grid-gap: 10px; /* Gap between buttons */
  margin-top: 20px;
  justify-content: center; /* Center the grid horizontally */
}

.charButton {
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  padding: 20px;

  font-size: 26px; /* Larger font size */
  font-weight: bold; /* Bold font */
  cursor: pointer;
  border-radius: 50%;
  background-color: white;
  color: black;
  border: 2px solid black;
  text-align: center;
  /* Set maximum width to allow line breaks */
  user-select: none; /* Prevent text selection */
  -webkit-touch-callout: none; /* Prevent default callout menu on iOS */
  -webkit-user-select: none;
}
/* Add a pressed state style for the buttons */
.charButton.pressed {
  background-color: #ccc; /* Change the background color when pressed */
}
.wideButton {
  grid-column: span 2; /* Button spans 2 columns */
  font-size: 34px; /* Larger font size */
}

.spacebar {
  grid-column: span 5; /* Button spans 2 columns */
  font-size: 34px; /* Larger font size */
}

.tallButton {
  grid-row: span 5; /* Button spans 5 rows */
  word-wrap: break-word;
  font-size: 34px; /* Larger font size */
  max-width: 28px;
}

#output {
  margin-top: 20px;
  width: 100%;
  height: 150px;
  font-size: 32px;
}