#content {
  width: 55%;
  /* or add stuff to org-publish-alist
   * https://github.com/dakrone/ox-tufte/issues/11#issuecomment-657203379
   */
  max-width: 50rem;
}

.tryit:before {
  content: "Try it out";
  font-style: italic;
  font-size: 1.5rem;
}

.tryit {
  font-size: 1.1rem;
  border: solid 1px grey;
  padding: 1em;
  background: #eeeee7;
  margin: 1.4rem -1em;
}

.tryit p {
  font-size: 1.2rem;
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
}

.tryit .alphabet, .tryit .shifted-alphabet {
  font-family: monospace;
}

.tryit input {
  max-width: calc(100% - 1em);
}

.tryit .combined-cipher-plain .word {
  display: inline-block;
  white-space: nowrap;
}

.tryit .combined-cipher-plain .stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 1.5em;
}

.tryit .combined-cipher-plain .stack .letter {
  color: grey;
}

.tryit .combined-cipher-plain .stack .inputLetter {
  font-style: italic;
}

.tryit .combined-cipher-plain .stack .keyLetter {
  color: grey;
}

.tryit .combined-cipher-plain .stack .outputLetter {
  font-weight: bold;
  color: blue;
}

.tryit .combined-cipher-plain .stack input {
  border-style: none none solid none;
  border-width: 0px 0px 1px 0px;
  border-color: grey;
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
}

.bigspace {
  display: inline-block;
  width: 2em;
}

input.selected-letter {
  background: lightblue;
}

input.error {
  background: red !important;
}

.frequency-chart {
  display: flex;
  flex-direction: row;
}

.frequency-chart .letter {
  display: inline-block;
  text-align: center;
}

.frequency-chart .frequency-line {
  display: flex;
  flex-direction: column-reverse;
  width: 1.75em;
  align-items: center;
}

.frequency-chart .frequency:before {
  display: block;
  background: blue;
  content: " ";
  width: 1em;
}

.frequency-chart .frequency[data-frequency="20"]:before {
  height: 8em;
}

.frequency-chart .frequency[data-frequency="15"]:before {
  height: 6em;
}

.frequency-chart .frequency[data-frequency="14"]:before {
  height: 5.6em;
}

.frequency-chart .frequency[data-frequency="13"]:before {
  height: 5.2em;
}

.frequency-chart .frequency[data-frequency="12"]:before {
  height: 4.8em;
}

.frequency-chart .frequency[data-frequency="11"]:before {
  height: 4.4em;
}

.frequency-chart .frequency[data-frequency="10"]:before {
  height: 4em;;
}

.frequency-chart .frequency[data-frequency="9"]:before {
  height: 3.6em;
}

.frequency-chart .frequency[data-frequency="8"]:before {
  height: 3.2em;
}

.frequency-chart .frequency[data-frequency="7"]:before {
  height: 2.8em;
}

.frequency-chart .frequency[data-frequency="6"]:before {
  height: 2.4em;
}

.frequency-chart .frequency[data-frequency="5"]:before {
  height: 2em;
}

.frequency-chart .frequency[data-frequency="4"]:before {
  height: 1.6em;
}

.frequency-chart .frequency[data-frequency="3"]:before {
  height: 1.2em;
}

.frequency-chart .frequency[data-frequency="2"]:before {
  height: 0.8em;
}

.frequency-chart .frequency[data-frequency="1"]:before {
  height: 0.4em;
}

.frequency-chart .frequency[data-frequency="0"]:before {
  height: 1px;
}

.frequency-chart .frequency-line.used, .frequency-chart .frequency-line.used .letter {
  text-decoration: line-through;
  color: grey;
}

.frequency-chart .frequency-line.used .frequency:before {
  background: lightblue;
}

input.spoiler-control {
  display: none;
}

label.spoiler {
  cursor: pointer;
}

.spoiler-control:not(:checked) + .spoiler > .spoiler-contents {
  display: none;
}

.spoiler-control:checked + .spoiler > .spoiler-label {
  display: none;
}

.spoiler {
  text-decoration: underline dotted 1px;
}

.spoiler-control + .spoiler:before {
  content: "(Spoiler alert! Click to reveal.)";
  font-weight: bold;
  color: #666666;
}

.spoiler-control:checked + .spoiler:before {
  content: "(Spoiler): ";
  font-weight: bold;
}

.sidebar {
  font-size: 1.1rem;
  border: solid 1px grey;
  padding: 1em;
  background: #dddddd;
  margin: 1.4rem -1em;
}

.vigenere-table .highlighted {
  background: lightblue;
}

#substitution-pairs-substitution-table td, #substitution-pairs-substitution-table th {
  text-align: center;
  font-size: smaller;
}

/*
#substitution-pairs-substitution-table col.highlight-col {
  background: hsl(0, 0%, 0%, 0.05);
}

#substitution-pairs-substitution-table tr.highlight-row {
  background: hsl(0, 0%, 0%, 0.05);
}
*/

#substitution-pairs-substitution-table > tbody > tr > td:nth-child(6),
#substitution-pairs-substitution-table > tbody > tr > td:nth-child(11),
#substitution-pairs-substitution-table > tbody > tr >  td:nth-child(16),
#substitution-pairs-substitution-table > tbody > tr > td:nth-child(21) {
  border-right: solid 1px silver;
}

#substitution-pairs-substitution-table > tbody > tr:nth-child(6) > td,
#substitution-pairs-substitution-table > tbody > tr:nth-child(11) > td,
#substitution-pairs-substitution-table > tbody > tr:nth-child(16) > td,
#substitution-pairs-substitution-table > tbody > tr:nth-child(21) > td {
  border-bottom: solid 1px silver;
}

#substitution-pairs-substitution-table tr:not(.col-header) th {
  border-right: solid 1px grey;
}

#substitution-pairs-substitution-table tr.col-header th {
  border-bottom: solid 1px grey;
}