html,
body {
  margin: 0;
  padding: 0;
  background: black;
}

html {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  font-size: 100%;
}

main {
  width: 100vw;
  height: 100vh;
}

#controls {
  display: flex;
  align-items: center;
  gap: 20px;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px 12px 10px 8px;
  border-radius: 0 0 4px 0;
  font-size: 13px;
}

.CheckboxField {
  display: flex;
  align-items: center;
  gap: 6px;
}

.Field {
  display: flex;
  align-items: center;
  gap: 6px;
}

#fovInput,
#speedInput {
  max-width: 80px;
}

.StaticShapeLabel {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
  padding: 1px 3px;
  border-radius: 1px;
}

.StatsPanel {
  left: auto !important;
  right: 0;
}

.AxisLabel {
  font-size: 12px;
  pointer-events: none;
}

.AxisLabel[data-axis="x"] {
  color: rgb(255, 153, 0);
}

.AxisLabel[data-axis="y"] {
  color: rgb(153, 255, 0);
}

.AxisLabel[data-axis="z"] {
  color: rgb(0, 153, 255);
}