Program is stuck- doesn't change from "\\running code"

HTML-CSS
1

Why is this not running?

#rect {
animation-name: rainbow;
animation-duration: 4s;
@keyframes rainbow{
0%{
background-color: blue;
}
50%{
background-color: green;
}
100%{
background-color: yellow;
}
}
Your code so far*


<style>
div {
  height: 40px;
  width: 70%;
  background: black;
  margin: 50px auto;
  border-radius: 5px;
}

#rect {
  animation-name: rainbow;
  animation-duration: 4s;
  @keyframes rainbow{
    0%{
      background-color: blue;
    }
    50%{
      background-color: green;
    }
    100%{
      background-color: yellow;
    }
  }


}




</style>
<div id="rect"></div>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:82.0) Gecko/20100101 Firefox/82.0.

Challenge: Learn How the CSS @keyframes and animation Properties Work

Link to the challenge:

2

I think the tests are stuck in an infinite loop or something

look at the example code:

#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

@keyframes should be used outside other selectors, instead you have it inside an other selector

3

Thank you for all that you do, for helping noobs like myself!