HeHe-Centiped/www/public_html/css/styles.css

html, body {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: black; }

#root {
  position: relative;
  width: 100%;
  height: 100%; }

#header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  display: none; }

#timelaps {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  overflow: hidden; }
  #timelaps video#timelapsvid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    @media (min-aspect-ratio: 16 / 9) {
      #timelaps video#timelapsvid {
        height: 200%;
        top: -50%; } }
    @media (max-aspect-ratio: 16 / 9) {
      #timelaps video#timelapsvid {
        width: 200%;
        left: -50%; } }

#mapout {
  position: absolute;
  z-index: 9;
  bottom: 0;
  left: 0;
  width: 23.5%;
  margin: 1% 0.5% 1% 1%;
  height: 10%;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 2px; }

#mapin {
  position: absolute;
  z-index: 9;
  bottom: 0;
  left: 25%;
  width: 23.5%;
  margin: 1% 0.5% 1% 0.5%;
  height: 10%;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 2px; }

#timeline {
  position: absolute;
  z-index: 9;
  bottom: 0;
  right: 0;
  width: 48%;
  margin: 1% 1% 1% 0.5%;
  padding: 0.5%;
  height: 8.3%;
  background-color: rgba(15, 15, 15, 0.8);
  border-radius: 2px; }
  #timeline .vis-timeline {
    border: none; }
  #timeline .vis-time-axis,
  #timeline .vis-background, #timeline .vis-background.vis-horizontal, #timeline .vis-background.vis-vertical,
  #timeline .vis-panel.vis-center, #timeline .vis-panel.vis-top, #timeline .vis-panel.vis-bottom {
    border: none; }
  #timeline .vis-text {
    color: #827f7f; }
  #timeline .vis-custom-time.videotime {
    background-color: #2781cc; }