html,
body {
  margin: 0;
  padding: 0;
  min-width: 100vw;
  min-height: 100vh;
}
body,
.touch {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
}

.touch {
  cursor: pointer;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
}
.hidden{
  display:none;
}
svg {
  margin-top: -150px;
  filter:grayscale(1);
  transition: all 50ms linear;
  max-width:900px;
}

input[type="range"][orient="vertical"] {
  writing-mode: bt-lr; /* IE */
  -webkit-appearance: slider-vertical; /* Chromium */
  width: 50px;
  height: 175px;
  margin: 3em 5px 1em;
  cursor: grabbing;
  display: none;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  butts: 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: #bbb;
  border-radius: 0.5rem;
  width: 70px;
}

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

  /*custom styles*/
  background-color: #5cd5eb;
  width: 70px;
  height: 1rem;
}

input[type="range"]:focus::-webkit-slider-thumb {
  border: 1px solid #bbb;
  outline: 3px none transparent;
  outline-offset: 0;
}

/******** Firefox styles ********/
/* slider track */
input[type="range"]::-moz-range-track {
  background-color: #bbb;
  border-radius: 0.5rem;
  width: 70px;
}

/* 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: #5cd5eb;
  width: 70px;
  height: 1rem;
}

input[type="range"]:focus::-moz-range-thumb {
  border: 1px solid #bbb;
  outline: 3px none transparent;
  outline-offset: 0;
}