* {
  font-family: Arial, sans-serif;
}

h1 {
  font-family: Courier, sans-serif;
  padding-left: 1.4em;
}

h3 {
  font-style: italic;
  margin-bottom: 0px;
}

a {
  color: inherit;
  display: block;
}

td {
  padding-right: 2em;
  border-left: 0.5em;
  border-right: 0.5em;
  border-color: #000;
}

th {
  padding-right: 4em;
  max-width: 6em;
}

.blue-mate {
  color: #fff;
  background-color: #1c3040;
}

.bum {
  padding-bottom: 90px;
}

.central {
  width: 82%;
  margin: auto;
  background-color: #dee;
}

.changer {
  display: inline-block;
  vertical-align: top;
  height: 100%;
}

.contrast {
  color: #fff;
  background-color: #330;
}

.deletion {
  background-color: #f99;
}

.help {
  font-size: 1.1em;
  font-style: italic;
  background-color: #eed;
}

.options-content {
  font-size: 0.75em;
}

.row0 {
  background-color: #cce8fa;
}

.row1 {
  background-color: #f5ee24;
}

.row2 {
  background-color: #ddd;
}

.features {
  color: #fff;
  background-color: #000;
  width: 200px;
  padding-left: 15px;
  border-right: 20px solid #cc0;
  padding-bottom: 20px;
}

.report {
  background-color: #ebcbb2;
  font-size: 1.2em;
}

.selector {
  overflow-y: scroll;
  max-height: 10em;
  background-color: #ffa333;
  width: max-content;
}

.state-panel {
  background-color: #f5f5f5;
  width: calc(100% - 250px);
  padding-left: 15px;
  //padding-bottom: 90px;
}

.table-option {
  display: inline-block;
  margin-left: 30px;
}

@media (max-width: 780px) {
  h1 {
    padding-left: 0.6em;
  }

  .changer {
    display: block;
    width: auto;
  }

  .central {
    width: 95%;
  }

  .features {
    border-right: none;
    padding-left: 2em;
  }
}