body {
  font-family: sans-serif;
  background: #111;
  color: #eee;
  text-align: center;
  padding: 2em;
}

.prompt {
  font-size: 1.5em;
  margin-bottom: 1em;
}

.choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  max-width: 98%;
  margin: 0 auto;
}

.choices button {
  font-size: 2em;
  padding: 1em;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background-color: #444;
  color: white;
  transition: background-color 0.3s ease;
}

.choices button:hover {
  background-color: #666;
}

.result {
  margin-top: 2em;
  font-size: 2em;
}

.nextBtn {
  width: 80%;
  height: 150px;
  background-color: #444;
  font-size: 2em;
  color: white;
  border-radius: 10px;
}

/* when the body has this class, hide every transliteration element */
.hide-translit .translit { display: none !important; }