body {
  font-family: "helvetica", sans-serif;
  text-align: center;
  background-color: #000000;
  color: #cccccc;
  vertical-align: center;
}

@media (orientation: portrait) {
  body {
    transform: rotate(90deg);
    text-align: right;
    margin: 30% 0% 0% 0%;
  }

  .value-tile {
    font-size: 100%;
  }
}

@media (orientation: landscape) {
  body {
    margin: 4% 0% 0% 0%;
    text-align: center;
  }

  .value-tile {
    font-size: 130%;
  }
}

.main-grid {
  height: 100%;
  width: 100%;
  display: inline-grid;
  position: relative;
}

.value-tile {
  background: #464646;
  margin: 1% 1% 1% 1%;
  border: none;
  border-radius: 25px;
  height: 520px;
  max-height: 520px;
  min-height: 520px;
  width: 14%;
  padding: 10% 1% 15% 1%;
  text-align: center;
  vertical-align: center;
  box-sizing: border-box;
  display: inline-grid;
}

.value-number {
  font-size: 150%;
  font-weight: bold;
  text-align: center;
  vertical-align: center;
  display: inline-block;
}

.battery-low-warning {
  font-size: 150%;
  font-weight: bold;
  color: #ff0000;
}

.side-widget {
  max-width: 100%;
}

.chart-canvas {
  position: relative;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

.time {
  font-family: monospace;
  font-size: 450%;
  font-weight: bold;
  color: #cf5c5c;
}