/* Every page is a single vertically centered column on a light gray background. */
html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.narrow,
.wide {
  width: 100%;
  padding: 15px;
  margin: auto;
}

.narrow {
  max-width: 330px;
}

.wide {
  max-width: 700px;
}

.text-larger {
  font-size: larger;
}

/* Public key panel: same colors as the read-only "To account" form control. */
.pubkey-box {
  color: #495057;
  background-color: #e9ecef;
}

/* PEM-encoded key: 64-character lines wrap into two equal halves of 32. */
.pem {
  display: block;
  width: 32ch;
  max-width: 100%;
  margin: auto;
  font-size: 0.7rem;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Reserve room for the oracle's hint or result so the card doesn't jump. */
.oracle-result {
  min-height: 4rem;
}

/* Bootstrap 4.4 enlarged <small> from 80% to .875em; keep the original size. */
small,
.small {
  font-size: 80%;
}

/* Dropped ciphertexts: wrap into fixed-width lines (narrower on small screens). */
.ciphertext {
  display: inline-block;
  max-width: 80ch;
  text-align: left;
  word-break: break-all;
}