:root {
  --red: #bb0000;
  --ink: #222;
  --muted: #666;
  --line: #d6d6d6;
  --head: #d9d9d9;
  --ok: #1e9e3e;
  --warn: #b97800;
  --down: #bb0000;
  --maint: #2f6db5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 15px/1.5 "Open Sans", Arial, Helvetica, sans-serif;
}

.wrap { max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; }

header { text-align: center; }
.logo { width: 160px; height: auto; }

nav { margin: 18px 0 28px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
nav a {
  display: inline-block; padding: 6px 14px; border-radius: 3px;
  background: #e2e2e2; color: var(--ink); text-decoration: none; font-size: 14px;
}
nav a[aria-current="page"] { background: var(--red); color: #fff; }

h1 { font-size: 26px; margin: 0 0 16px; }

table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 14px; }
th, td { border: 1px solid var(--line); padding: 6px 10px; }
th.title { background: var(--head); text-align: center; }
thead th, .cols th { font-weight: 700; text-align: center; }
.avail td { text-align: center; }
.avail th { text-align: center; }
.avail a { color: var(--red); text-decoration: none; }
.services td:first-child { font-weight: 700; }
.services td:last-child { width: 30%; font-weight: 600; }

.online { color: var(--ok); }
.degraded { color: var(--warn); }
.outage { color: var(--down); }
.maintenance { color: var(--maint); }
.online::before { content: "\2713\00a0\00a0"; }
.degraded::before { content: "\26A0\00a0\00a0"; }
.outage::before { content: "\2715\00a0\00a0"; }
.maintenance::before { content: "\2692\00a0\00a0"; }

.updated { color: var(--muted); font-size: 13px; margin-top: -12px; }
.notice { border: 1px solid var(--line); border-left: 4px solid var(--maint); padding: 12px 14px; }

footer { text-align: center; margin-top: 32px; }
footer .logo { width: 110px; opacity: .85; }

@media (max-width: 520px) {
  .services td:last-child { width: 45%; }
  th, td { padding: 6px; }
}