html,
body {
  margin: 0;
}

body {
  align-items: center;
  display: flex;
  justify-content: center;
  max-width: 100%;
  padding: 1em;
}

.rsa-outer {
  margin: 1em;
  padding: 1em;
  width: 100%;
  max-width: 1000px;
  font-family: sans-serif;
  box-shadow: 6px 6px #d9ead3;
  border: solid;
  background: white;
  margin-left: auto;
  margin-right: auto;
}

.bottom-border {
  border-bottom: solid;
}

.form {
  padding: 1em;
  padding: 1em;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.form div {
  margin: 0.25em;
}

.two-column-grid {
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) minmax(auto, 4fr);
}

.key-value {
  width: 100%;
  display: inline-block;
  overflow-wrap: anywhere;
}

.key-preview {
  padding: 0.5em;
  border: 1px solid #D3D3D3;
}

.grid-value {
  width: 100%;
  display: flex;
  overflow-wrap: anywhere;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  align-items: left;
}

.char-elem {
  width: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d3d3d3;
  /*background-color: #eeeeee;*/
}

.char-elem.padding {
  background-color: #add8e6;
}

.char-elem.delimiter {
  background-color: #e6add8;
}

.char-elem.message {
  background-color: #d8e6ad;
}

.char-elem.match {
  background-color: #a6f1a6;
}

.attack-controls {
  display: flex;
  flex-direction: row;
}

.attack-controls input {
  margin-right: 0.5em;
}