.button-small {
  background: linear-gradient(180deg, #EA3EB1 -8.67%, #842364 116.67%);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 10px 5px rgba(7, 5, 124, 0.2);
  border-radius: 37.5px;
  border-width: 0;
  width: 200px;
  height: 40px;
  color: white;
  font-size: 20px;
  font-weight: 500;
  align-items: center;
  text-align: center;
  transition: box-shadow 0.2s ease-in-out, transform 0.1s ease-in-out;
}
.button-small:hover {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.button-small:active{
  transform: translateY(3px);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
  .button-small {
    width: 150px;
  }
}

.button-huge {
  background: linear-gradient(180deg, #EA3EB1 -8.67%, #842364 116.67%);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 10px 5px rgba(7, 5, 124, 0.2);
  border-radius: 37.5px;
  border-width: 0;
  width: 500px;
  height: 80px;
  color: white;
  font-size: 50px;
  font-weight: 500;
  align-items: center;
  text-align: center;
  transition: box-shadow 0.1s ease-in-out, transform 0.1s ease-in-out;
}
.button-huge:hover {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.button-huge:active{
  transform: translateY(3px);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
}
@media (max-width: 767px) {
  .button-huge {
    width: 300px;
    height: 60px;
    font-size: 30px;
  }
}
@media (max-width: 375px) {
  .button-huge {
    width: 150px;
    height: 40px;
    font-size: 20px;
  }
}



.control-button {
  width: 100%;
  min-width: 50px;
  height: 50px;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2322) 0%, rgba(255, 255, 255, 0.0301) 100%);
  background-color: rgba(255, 255, 255, 0.22); /* animatable */
  transition: background-color 0.1s ease, top 0.1s ease-in-out;
  border-radius: 10px;
  border: none;

  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 100%;
  color: #FFFFFF;

  transition: box-shadow 0.1s ease-in-out, transform 0.05s ease-in-out;
}

.control-button:hover {
  background-color: rgba(255, 255, 255, 0.34);
}

.control-button:active {
  transform: translateY(2px);
  background-color: rgba(255, 255, 255, 0.10);
}





input[type=range] {
  width: 100%;
  margin: 12px 0;
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  background: #e96aae;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 8px;
  width: 100%;
  height: 12px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  margin-top: -13px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border: 1.4px solid #000000;
  border-radius: 48px;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ea6eb0;
}
input[type=range]::-moz-range-track {
  background: #e96aae;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 8px;
  width: 100%;
  height: 12px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border: 1.4px solid #000000;
  border-radius: 48px;
  cursor: pointer;
}
input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 12px 0;
  color: transparent;
  width: 100%;
  height: 12px;
  cursor: pointer;
}
input[type=range]::-ms-fill-lower {
  background: #e866ac;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 16px;
}
input[type=range]::-ms-fill-upper {
  background: #e96aae;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 16px;
}
input[type=range]::-ms-thumb {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border: 1.4px solid #000000;
  border-radius: 48px;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
input[type=range]:focus::-ms-fill-lower {
  background: #e96aae;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ea6eb0;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  input[type=range] {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }
}









input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
input[type=number] {
  border: 1px solid #e9ecef;
  padding: 0.5rem;
  position: relative;
  white-space: nowrap;
  width: 80px;
  height: 50px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(9.6px);
  -webkit-backdrop-filter: blur(9.6px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #eaeaea9b #eeeeee00;
  font-size: 25px;
  font-weight: 200;
  color: white;
  font-family: var(--bs-font-monospace);
  text-align: center;
}
input[type=number]::placeholder {
  color: white;
  font-family: var(--bs-font-monospace);
  text-align: center;
}

@media (max-width: 800px) {
  input[type=number] {
    height: 50px;
    font-size: 21px;
  }
}
@media (max-width: 400px) {
  input[type=number] {
    height: 40px;
    font-size: 16px;
  }
}