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

#button-container {
  position: absolute;            
  pointer-events: all;      
  height: 30px;
  width: 30px;
}

.button-left {
  left: 4px;  
}

.button-right {
  right: 4px;
}

.button-top {
  top: 4px;  
}

.button-bottom {
  bottom:54px;
}
  
#button-container:hover {  
  display:initial;
}
  
#fullscreen-button {
  padding: 4px;
  margin: 2px;
  background: rgba(23, 35, 34, 0.75);
  border: none;
  border-radius: 5px;
  fill: white;
  cursor: pointer;
  outline: none;
  display:none;
}

#fullscreen-button:hover {
  background: #1ab7ea;
}

  /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  #button-container {
    height: 20px;
    width: 20px;
  }

  #fullscreen-button {
    padding: 3px;
    margin: 0px;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {


}