$avoid-background: #a00;
$avoid-text: #fff;
$warn-background: #c90;
$warn-text: #fff;
$ok-background: #282;
$ok-text: #fff;

body {
  font-size: 16pt;
  line-height: 1.25em;
}

p {
  margin: 0;
}

.no {
  display: none;
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);

  text-align: center;
  text-shadow: 1px 1px 4px #000;

  h1 {
    font-size: 4em;
  }
}

.status-avoid {
  background: $avoid-background;
  color: $avoid-text;
}

.status-warn {
  background: $warn-background;
  color: $warn-text;
}

.status-ok {
  background: $ok-background;
  color: $ok-text;
}

$avoid-background: #a00;
$avoid-text: #fff;
$warn-background: #c90;
$warn-text: #fff;
$ok-background: #282;
$ok-text: #fff;

body {
  font-size: 16pt;
  line-height: 1.25em;
}

p {
  margin: 0;
}

.no {
  display: none;
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);

  text-align: center;
  text-shadow: 1px 1px 4px #000;

  h1 {
    font-size: 4em;
  }
}

.status-avoid {
  background: $avoid-background;
  color: $avoid-text;
}

.status-warn {
  background: $warn-background;
  color: $warn-text;
}

.status-okay {
  background: $ok-background;
  color: $ok-text;
}

Fix CSS for the okay status.
Fix CSS for the okay status.
