* {
  margin: 0 0;
  padding: 0 0;
  border-radius: 5vh;
  font-family: 'Courier New', Courier, monospace;
  box-sizing: border-box;
}

body,
div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 100vw;
  height: 100vh;
}

input {
  appearance: none;
  width: 95vw;
  height: 10vh;
}

input::-webkit-slider-thumb{
  appearance: none;
  background: rgba(127, 127, 127, 0.5);
  border-radius: 10vh;
  aspect-ratio: 1;
  height: 10vh;
  cursor: pointer;
}

input[type="button"] {
  font-size: 5vmin;
  height: 20vh;
  text-align: center;
}

#r {
  background: linear-gradient(90deg, #000, #f00);
}

#g {
  background: linear-gradient(90deg, #000, #0f0);
}

#b {
  background: linear-gradient(90deg, #000, #00f);
}