/* http://jgthms.com/web-design-in-4-minutes */

body {
  margin: 0 auto;
  max-width: 50em;

  line-height: 1.5;
  padding: 1em 1em;

  font-family: "Helvetica", "Arial", sans-serif;

  color: #555;
}

.button, select {
  font-size: 1em;
  color: #555;
  padding-left: 1em;
  padding-right: 1em;
}

h1, h2, strong {
  color: #333;
}

h2 {
  margin-top: 1em;
  padding-top: 1em;
}

#sortable {
  margin-left: 5em;
}

.wrapper {
  display: flex;
}

.item {
  margin-left: 1em;
  margin-right: 1em;
}

.matrixInput, .matrixOutput {
  font-family: "Monaco", "Inconsolata", monospace;
  margin-left: 0.5em;
  margin-right: 0.5em;
  width: 5em;
}

.matrixInputSmaller {
  font-family: "Monaco", "Inconsolata", monospace;
  margin-left: 0.5em;
  margin-right: 0.5em;
  width: 2em;
}

.red {
  color: #F45346
}

.green {
  color: #A1D916
}

.purple {
  color: #571B9C
}

.preformatted {
  font-family: "Monaco", "Inconsolata", monospace;
}

.center {
  margin: auto;
  width: 100%;
  padding: 10px;
  text-align: center;
}

.matrixTable {
  display: inline-table;
  position: relative;
  top: -1em;
}

.matrixRow {
  display: table-row;
}

.matrixCell {
  display: table-cell;
}

#canvasContainer {
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 500px;
}