#connection-status {
  position: fixed;
  bottom: -100%;
  left: auto;
  width: 100%;
  text-align: center;
  font-size: var(--font-size);
  color: #fff;
  transition: bottom 500ms ease;
  z-index: -999;
  pointer-events: none;
}
#connection-status.active {
  bottom: 0;
  z-index: 999;
  pointer-events: all;
}

#connection-status > * {
  padding: 0.75rem;
}

.connection-status--online {
  background-color: hsl(155, 61%, 40%);
}
.connection-status--offline {
  background-color: hsl(0, 71%, 40%);
}

.connection-backdrop {
  background: rgba(0, 0, 0, 0.25);
  height: 100%;
  width: 100%;
  position: fixed;
  inset: 0;
  opacity: 0;
  z-index: -998;
  transition: opacity 250ms ease;
}
.connection-backdrop.active {
  opacity: 1;
  z-index: 998;
}