:root {
  color-scheme: light dark;
  font: 16px/1.45 system-ui, sans-serif;
  background: #171912;
  color: #f3f4e8;
}

body { margin: 0; }
main { max-width: 960px; margin: 0 auto; padding: 3rem 1rem; }
header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
h1 { color: #e6ef5b; font-size: 2.5rem; margin: 0 0 1.5rem; }
a { color: inherit; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid #3c4031; padding: .8rem .6rem; text-align: left; }
th { color: #aeb39d; font-size: .8rem; text-transform: uppercase; }
.up { color: #9bdc75; }
.down { color: #ff846c; }
.checking { color: #d4c96d; }
.warning { color: #d4c96d; }
.table-scroll { overflow-x: auto; }

@media (max-width: 600px) {
  main { padding-top: 1.5rem; }
  header { align-items: flex-start; flex-direction: column; }
  h1 { margin-bottom: 0; }
}