html,
body {
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #1c1c1c;
}
canvas {
  display: block;
  margin: 0 auto;
}

label {
  color: #ffffff;
  font-family: monospace;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
}

#freq-label {
  color: #000e19;
}

#title-label,
#authors-label {
  color: #BBBBBB;
}

/********** Range Input Styles **********/
/*Range Reset*/
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 15rem;
}

/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}

/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
  background-color: #000;
  border-radius: 0.5rem;
  height: 0.2rem;
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  margin-top: -6px; /* Centers thumb on the track */

  /*custom styles*/
  background-color: #000;
  height: 1rem;
  width: 1rem;
  border-radius: 4px;
  box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.3);
}

#a-slider::-webkit-slider-runnable-track,
#a-slider::-webkit-slider-thumb {
  background-color: #d61c59;
}

#d-slider::-webkit-slider-runnable-track,
#d-slider::-webkit-slider-thumb {
  background-color: #e7d84b;
}

#s-slider::-webkit-slider-runnable-track,
#s-slider::-webkit-slider-thumb {
  background-color: #efeac5;
}

#r-slider::-webkit-slider-runnable-track,
#r-slider::-webkit-slider-thumb {
  background-color: #1b8798;
}

input[type="range"]:focus::-webkit-slider-thumb {
  border: 1px solid #76618a;
  outline: 3px solid #76618a;
  outline-offset: 0.125rem;
}

/******** Firefox styles ********/
/* slider track */
input[type="range"]::-moz-range-track {
  background-color: #76618a;
  border-radius: 0.5rem;
  height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
  border: none; /*Removes extra border that FF applies*/
  border-radius: 0; /*Removes default border-radius that FF applies*/

  /*custom styles*/
  background-color: #bea6d3;
  height: 2rem;
  width: 1rem;
}

input[type="range"]:focus::-moz-range-thumb {
  border: 1px solid #76618a;
  outline: 3px solid #76618a;
  outline-offset: 0.125rem;
}