style.css

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden
}

body {
  width: 100%;
  height: 100%;
}

canvas {
  display: block;
}


#globe-container {
  position: absolute;
  top: 0;
  left: 0;
 
  width: 100%; /* Ensure both containers fill the entire width of the viewport */
  height: 100%; /* Ensure both containers fill the entire height of the viewport */
  background-color: rgb(51, 51, 51);

}
                                  
#ui-container {
  display: None;
  position: fixed;
  top: 0;
  left: 0;
  
  width: 30%;
  height: 100%; 
  /*background-color: black;/* Ensure the container takes up the full height of the viewport */
}

/* Target elements with class 'slider' and 'colourPicker' inside #ui-container */
#ui-container .slider,
#ui-container .colourPicker {
  width: 80%;
}

#edit_button {
  position: absolute;
  top: 10px; /* adjust as needed */
  left: 10px; /* adjust as needed */
  z-index: 1; /* ensure the button is above the globe */
  border: none;

  background-size: cover; /* Scale the background image to cover the entire button */
  background-position: center; /* Center the background image */
  background-color: rgba(0, 0, 0, 0);  /* Adjust the alpha value (0.5 for 50% transparency) */
}


#edit_button svg {
  background-color: grey;
  border-radius: 50px;
  border-color: black;

}