html, body {
  margin: 0;
  padding: 0;
  background: black;
  height: 100%;
  overflow: hidden;
  touch-action: none; /* Helps prevent zooming */
}

canvas {
  display: block;
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 4px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 7px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 7px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}
/* Larger slider thumbs for small screens (mobile) */
@media (max-width: 768px) {
  input[type=range].slider {
    height: 10px;
  }

  input[type=range].slider::-webkit-slider-thumb {
    width: 30px;
    height: 15px;
  }

  input[type=range].slider::-moz-range-thumb {
    width: 30px;
    height: 15px;
  }

  .slLabel {
    height: 20px;
    font-size: 15px;
  }
}

button {
  background: #d3d3d3;
  font-family: 'VT323';
  outline: none;
  border: 2px solid;
  border-radius: 5px;
  font-size: 16px;
}

button:hover {
  opacity: 0.7;
}

.modal {
  display: block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 0; /* Sit on top */
  padding-top: 75px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */  
}

.modal-content {
  font-family: 'VT323';
  background-color: white;
  color: #04AA6D;
  padding: 20px;
  margin: 5%;
  max-height: 50%;
  overflow: auto;
  transform: translateY(-700px);
  transition: transform 0.4s ease-in-out;
}
.modal-content.show {
  transform: translateY(0);
 
}