/* status.ethdns.com - the public status page (project statuspage; the palette and the font of ethdns.com) */

@font-face { font-family: "Exo 2"; src: url("fonts/exo-2-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Exo 2"; src: url("fonts/exo-2-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --bg: #15171a; --card: #202328; --line: #2e3239; --line-2: #3a3f47;
  --text: #e6e8eb; --body: #c3c8cf; --muted: #9da3ad; --faint: #80878f; --accent: #5cc8ff;
  --ok: #5cc8ff; --maint: #a99cff; --warn: #f5c26b; --bad: #ff7a7a; --none: #3a3f47;
  --sans: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--sans); }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }

.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 600;
  font-size: 21px; letter-spacing: .01em; }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand span { color: var(--muted); font-weight: 400; }
.acc-s { stroke: var(--accent); }
.home { margin-left: auto; color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; padding: 6px 14px;
  border: 1px solid var(--line-2); border-radius: 6px; white-space: nowrap; }
.home:hover { border-color: var(--accent); }
main.wrap { padding-top: 32px; padding-bottom: 56px; }

/* overall state */
.overall { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 28px; padding: 18px 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.overall .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ok); flex: none; }
.overall .text { font-size: 19px; font-weight: 600; }
.overall .upd { margin-left: auto; color: var(--muted); font-size: 14px; }
.overall.s-maintenance .dot { background: var(--maint); }
.overall.s-degraded .dot { background: var(--warn); }
.overall.s-outage .dot { background: var(--bad); }
.overall.s-nodata .dot { background: var(--none); }

/* components */
.comps { background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.comp { padding: 18px 20px; }
.comp + .comp { border-top: 1px solid var(--line); }
.head { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.name { font-weight: 600; font-size: 17px; }
.label { color: var(--muted); }
.state { margin-left: auto; font-size: 14px; font-weight: 600; }
.s-operational { color: var(--ok); }
.s-maintenance { color: var(--maint); }
.s-degraded { color: var(--warn); }
.s-outage { color: var(--bad); }
.s-development, .s-nodata { color: var(--faint); }
.note { margin: 6px 0 0; color: var(--body); font-size: 14px; }

/* day bars: 90 days, 30 on a phone */
.days { display: flex; gap: 2px; height: 28px; margin-top: 10px; }
.days i { flex: 1; min-width: 0; border-radius: 2px; background: var(--ok); opacity: .8; }
.days i:hover { opacity: 1; }
.days .m { background: var(--maint); }
.days .d { background: var(--warn); }
.days .x { background: var(--bad); }
.days .n { background: var(--none); }
.meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; color: var(--faint); font-size: 12.5px; }
.d30 { display: none; }

/* parts of a component */
.part { margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--line); }
.part .label { color: var(--text); }
.part .days { height: 20px; }

.other, .about { margin: 20px 0 0; color: var(--muted); font-size: 14px; }
.other b { color: var(--text); font-weight: 600; }

@media (max-width: 600px) {
  .brand { flex-wrap: wrap; row-gap: 0; font-size: 19px; }
  .brand span { flex-basis: 100%; padding-left: 38px; font-size: 14px; line-height: 1.2; }
  .days i:nth-child(-n+60) { display: none; }
  .d90 { display: none; }
  .d30 { display: inline; }
  .overall .upd { margin-left: 0; width: 100%; }
}