:root {
  --primary-hue: 200;
  --primary-lightness: 21%;
  --brand-primary-lighter: hsl(var(--primary-hue), 50%, var(--primary-lightness));
  --brand-primary-darker: hsl(var(--primary-hue), 50%, 36%);
  --black-hue: 0;
  --black-saturation: 0%;
  --black-lightnes: 0%;
}

.primary-colors {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.primary-colors .primary-color {
  flex: 1 1 50px;
  height: 60px;
  background-color: hsl(var(--primary-hue), 50%, var(--primary-lightness));
}
.primary-colors .primary-color-1 {
  --primary-lightness: 15%;
}
.primary-colors .primary-color-2 {
  --primary-lightness: 20%;
}
.primary-colors .primary-color-3 {
  --primary-lightness: 25%;
}
.primary-colors .primary-color-4 {
  --primary-lightness: 30%;
}
.primary-colors .primary-color-5 {
  --primary-lightness: 35%;
}
.primary-colors .primary-color-6 {
  --primary-lightness: 40%;
}
.primary-colors .primary-color-7 {
  --primary-lightness: 45%;
}
.primary-colors .primary-color-8 {
  --primary-lightness: 50%;
}
.primary-colors .primary-color-9 {
  --primary-lightness: 55%;
}
.primary-colors .primary-color-10 {
  --primary-lightness: 60%;
}

body {
  padding: 1rem;
  font-family: "Roboto";
}

.hsl-colors {
  margin-bottom: 2rem;
}

.slider {
  max-width: 500px;
  margin: 1rem auto;
}

.slider input {
  width: 100%;
}

//selecting the slider with the use of a selector
let slider = document.querySelector('#intensity');

slider.value = 60; //setting the default point of the slider

//function that makes the hue change as the slider is moved
slider.addEventListener('input', function(){
  console.log(this.value);
  document.documentElement.style.setProperty('--primary-hue', this.value)
});