.container {
  padding: 0 3rem;
}

.main {
  padding: 1rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stack,
.is,
.clock,
.api {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: #444;
}

.clock {
  font-family: "Fira Mono", "Andale Mono", "Consolas", monospace;
}

.stack h2,
.api h2 {
  font-size: 1.1em;
  padding: 0;
  margin: 0;
  padding-bottom: 0.5rem;
}

.stack ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.stack ul:before {
  content: "[";
  color: orange;
  padding-right: 0.75rem;
}

.stack ul:after {
  content: "]";
  color: orange;
  padding-left: 0.75rem;
}

.stack li {
  display: inline;
  padding-right: 1rem;
}

.stack li:last-of-type {
  padding-right: 0;
}

.calculator {
  padding-top: 3rem;
  min-width: 90%;
}

.is-empty {
  outline: 3px solid #666666;
}

.is-accept {
  outline: 3px solid #2299dd;
}

.is-stack {
  outline: 3px solid #229922;
}

.api td {
  vertical-align: top;
}

.api td {
  padding-right: 1em;
}

.api td:nth-child(1) {
  font-family: "Fira Mono", "Andale Mono", "Consolas", monospace;
}

.api td:nth-child(3) {
  font-style: italic;
}

.api .fail {
  color: rgba(255, 60, 80);
}

.api .match {
  color: rgb(255, 230, 100);
}

.api .exact {
  color: rgb(80, 255, 100);
}

.api .miss {
  color: rgb(255, 130, 80);
}