html,
body {
  height: 100%;
}

body {
  color: #fff;
  display: flex;
  flex-direction: column;
  font-family: monospace;
}

.gauge {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.gauge-label {
  font-size: 1em;
  font-weight: 400;
  margin-bottom: 0.75rem;
}

.gauge-value {
  font-size: 2em;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.gauge-bar {
  background: #222;
  height: 5px;
  overflow: hidden;
  width: 200px;
}

.gauge-bar-inner {
  background: #fff;
  height: 100%;
  transform: translateX(-100%);
  width: 100%;
}

.gauge--general {
  background: #262626;
}
.gauge--general .gauge-label {
  color: #a6a6a6;
}
.gauge--general .gauge-value {
  margin-bottom: 0;
}

.gauge--beta {
  background: #bf4040;
}
.gauge--beta .gauge-label {
  color: #ffb3b3;
}
.gauge--beta .gauge-bar {
  background: #732626;
}

.gauge--gamma {
  background: #46b946;
}
.gauge--gamma .gauge-label {
  color: #b3ffb3;
}
.gauge--gamma .gauge-bar {
  background: #267326;
}

.gauge--alpha {
  background: #4080bf;
}
.gauge--alpha .gauge-label {
  color: #b3d9ff;
}
.gauge--alpha .gauge-bar {
  background: #264d73;
}