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

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;
  // border: 1px solid blue;

  video#timelapsvid {
    position: absolute;
    top: 0; left: 0;
    width:100%; height:100%;
    // source:not(.1080p){
    //   display:none;
    // }

    @media (min-aspect-ratio: 16/9) {
      height: 300%;
      top: -100%;
    }

    @media (max-aspect-ratio: 16/9) {
      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;

  .vis-timeline{
    border:none;
  }
  .vis-time-axis,
  .vis-background, .vis-background.vis-horizontal, .vis-background.vis-vertical,
  .vis-panel.vis-center, .vis-panel.vis-top, .vis-panel.vis-bottom{
    border:none;
  }
  .vis-text{
    color:white;
  }

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