Whate is the problem in this code?

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

<style>
body {
  background-color: #FFFFFF;
}

.green {
  background-color:hsl (120, 100 %, 50 %);
}

.cyan {
  background-color: hsl (180, 100 %, 50 %);
}

.blue {
  background-color: hsl (240, 100 %, 50 %);
}

div {
  display: inline-block;
  height: 100px;
  width: 100px;
}
</style>

<div class="green"style="background-color:green"></div>
<div class="cyan"style="background-color:cyan"></div>
<div class="blue" style="background-color:blue"></div>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36

Challenge: Adjust the Hue of a Color

Link to the challenge:

First of all:

<div class="green"style="background-color:green"></div>
<div class="cyan"style="background-color:cyan"></div>
<div class="blue" style="background-color:blue"></div>

don’t use the style attributes. The point of the exercise is to use the class.

Secondly:

.green {
  background-color:hsl (120, 100 %, 50 %);
}

.cyan {
  background-color: hsl (180, 100 %, 50 %);
}

.blue {
  background-color: hsl (240, 100 %, 50 %);
}

There should be no spaces between “hsl” and “(” and there should be no spaces between the numbers and the “%”.

When I fix those, your code passes for me.