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; }

#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: 300%;
        top: -100%; } }
    @media (max-aspect-ratio: 16 / 9) {
      #timelaps video#timelapsvid {
        width: 300%;
        left: -100%; } }

#timeline {
  position: absolute;
  z-index: 9;
  bottom: 0;
  left: 0;
  width: 67%;
  margin: 1% 0 1% 32%;
  padding: 7px;
  background-color: rgba(0, 0, 0, 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: white; }
  #timeline .vis-custom-time.videotime {
    background-color: red; }

#map {
  position: absolute;
  z-index: 9;
  bottom: 0;
  left: 0;
  width: 30%;
  margin: 1%;
  height: 40%;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 2px;
  display: none; }