:root {
  --monospace-font:
    ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
    "Roboto Mono", "Oxygen Mono", "Ubuntu Mono", "Source Code Pro", "Fira Mono",
    "Droid Sans Mono", "Consolas", "Courier New", monospace;

  --default-font:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", Arial, sans-serif;
}

.decoder-title {
  text-align: center;
}

.text {
  width: 50rem;
}

.main {
  font-size: 18px;
  font-family: var(--default-font);
}

.center {
  display: flex;
  justify-content: center;
  margin-bottom: 5rem;
}

.serial-decoder {
  width: 25rem;
}

.serial-input {
  font-family: var(--monospace-font);
  width: 100%;
  font-size: 18px;
  padding: 0.75rem;
  border-radius: 0.2rem;
  border: 2px solid rgb(40, 40, 40);
  background-color: rgb(245, 245, 252);
  outline-style: none;
  transition-duration: 0.2s;
  box-sizing: border-box;

  &:focus {
    border-color: rgb(137, 42, 186);
    background-color: rgb(248, 248, 252);
  }
}

.muted {
  color:  rgb(128, 128, 128);
}

.grid-dl {
  display: grid;
  grid-gap: 4px 16px;
  grid-template-columns: max-content;
}
.grid-dl > dt {
  font-weight: bold;
}
.grid-dl > dd {
  margin: 0;
  grid-column-start: 2;
  font-family: var(--monospace-font);
}