html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

h2 {
  margin-top: 1px;
  margin-bottom: 2px;
  border: 1px solid green;
}

#likeH2 {
  border: 1px solid rgb(5, 157, 81);
  width: 350px;
  font-size: x-large;
  font-weight: 600;
  margin-top: 1px;
  margin-bottom: 2px;
}

.tableContainer {
  width: 550px;
  /* height: 100px; */
  margin: auto;
  border: 1px red solid;
}

#alphaK {
  /* id of the label for the input box of the key */
  margin-top: 10px;
  margin-right: 3cqmax;
  float: left;
}

#alphaKey {
  /* id of the input box for the key */
  margin: 0 auto;
  margin-top: 10px;
}



#table6 {
  /* id of a table */
  /*margin: 0 auto; */
  margin: 0 auto;
  margin-top: 15px;
  width: 200px;
  border-collapse: collapse;
}

#table6 td {
  border: 1px solid blue;
  border-spacing: 0px;
}

#table5 {
  /* id of a table */
  margin: 0 auto;
  margin-top: 25px;
  width: 200px;
  border-collapse: collapse;
}

#table5 td {
  border: 1px solid green;
  border-spacing: 0px;
}

#table8 {
  /* id of a table */
  margin: 0 auto;
  margin-top: 25px;
  width: 200px;
  border-collapse: collapse;
}

#table8 td {
  border: 1px solid green;
  border-spacing: 0px;
}

#container {
  width: 552px;
  /* height: fit-content; */
  height: 180px;
  margin: 0 auto;
  border: 1px black solid;
}

#boxLeft {
  margin-top: 3px;
  width: 250px;
  border: 2px solid rgb(8, 237, 180);
  float: none;

}

#messagebox {
  float: left;
  max-width: 275px;
}

#codedMSG {
  float: left;
  max-width: 220px;
  /*border: 1px solid purple;*/
}

#thirdContainer {
  margin: 0 auto;
  max-width: 550px;
  height: fit-content;
  border: 1px solid green;
}

#aspot {
  width: 500px;
  word-wrap: break-word;
}

#fractioned {
  /*id of a div */
  clear: left;
  display: none;
  width: 62vw;
  margin: auto;
  font-size: 12px;
  border: 5px solid pink;
}

.frac {
  /* class for a table */
  margin: 0;
  padding: 0;
  border-spacing: 0px;
}

.frac td {
  /* frac is class name for a table */
  width: fit-content(200px);
  border: 1px solid red;
  empty-cells: hide;
}



#transpositionKey {
  /* id of the label for the input box of the transpositionKey */
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 5px;
  float: left;
  border: 1px solid brown;
}

#tpKey {
  /* id of the input box for the transposition key */
  margin: 0 auto;
  margin-top: 5px;
}

#tpEcho {
  /* the conditioned column header letters */
  background-color: pink;
}


.transpositionTable {
  width: 650px;
  margin: auto;
  border: 1px red solid;
}

/* .tx5 {
  margin: 0;
  padding: 0;
  border-spacing: 0px;
}

.tx5 td {
  width: fit-content;
  border: 0.5px solid blue;
  empty-cells: hide;
} */

#showHere {

  /* border: green 1px solid; */
  display: flex;
  justify-content: center;

}


.button {
  display: block;
  width: 115px;
  height: 25px;
  background: #4E9CAF;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  line-height: 25px;
}

.decodeContainer {
  margin: 0 auto;
  max-width: 550px;
  height: 200px;
  border: 1px solid rgb(170, 37, 99);
}