style.css

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  --colorOne:hsl(33, 60%, 94%);
  --colorTwo: hsl(216, 69%, 20%);
  --colorThree: hsl(200, 43%, 35%);
  --colorFour: hsl(35, 60%, 50%);

  color-scheme: light dark;
  background-color: var(--colorOne);


  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

h1{
  font-size: 10vw;
  line-height: 14vw;
  font-weight: 400;
  text-align: center;
  color: var(--colorTwo);
}

#introIcon{
  font-size: 20vw;
  color: var(--colorFour);
}

h2{
  font-size: 7vw;
  line-height: 13vw;
  font-weight: 300;
  text-align: center;
  color: var(--colorThree);
}

p{
  font-size: 4vw;
  line-height: 10vw;
  font-weight: 200;
  text-align: center;
  color: var(--colorTwo);
}

.colorShowcase{
  visibility: visible;
  font-weight: 400;
  width: 100%;
  padding-bottom: 2vw;
  text-align: center !important;
}

.colorInput{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  cursor: pointer;
  width: 100%;
  height: 20vw;
}

#forColorOne{
  position: relative;
  text-align: center;
  color: var(--colorOne);
  border: 5px solid #000000;
  width: 40vw;
  height: 20vw;
}
#forColorTwo{
  position: relative;
  text-align: center;
  background-color: var(--colorTwo);
  border: 5px solid #000000;
  width: 40vw;
  height: 20vw;
}
#forColorThree{
  position: relative;
  text-align: center;
  background-color: var(--colorThree);
  border: 5px solid #000000;
  width: 40vw;
  height: 20vw;
}
#forColorFour{
  position: relative;
  text-align: center;
  background-color: var(--colorFour);
  border: 5px solid #000000;
  width: 40vw;
  height: 20vw;
}

@media screen and (max-width: 1050px){
  .colorInput {
      height: 20vw !important;
  }
  #introIcon{
    font-size: 30vw;
  }
}

@media screen and (min-width: 500px){
  .colorInput {
      height: 10vw;
  }
  #introIcon{
    font-size: 20vw;
  }
  
}