*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "DM Sans";
  color: #383a42;
}

body {
  padding: 10px;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  max-width: 500px;
}

#status-table {
  margin: 1rem 0;
  width: 100%;
}
#status-table .item {
  padding-right: 0.25rem;
}
#status-table .status-skipped, #status-table .status-bad, #status-table .status-ok, #status-table .status-waiting {
  --bg: rgb(197, 202, 207);
  --clr: #383a42;
  background: var(--bg);
  border-radius: 100px;
  padding: 4px 8px;
  width: 5.5rem;
  font-weight: bold;
  color: var(--clr);
  text-align: center;
  transition: background-color 250ms, color 250ms;
  transition-delay: 250ms;
}
#status-table .status-ok {
  --bg: hsl(85, 100%, 65%);
  --clr: hsl(85, 100%, 30%);
}
#status-table .status-bad {
  --bg: hsl(6, 100%, 70%);
  --clr: hsl(6, 100%, 30%);
}
#status-table .status-skipped {
  --bg: hsl(210, 100%, 80%);
  --clr: hsl(210, 100%, 30%);
}

/*# sourceMappingURL=main.css.map */