Styling infobox problem -- Cannot change color of background.

[merry urchin]

Problem: I can't change the color of the overall infobox (pi-background).

What I have done:
I want to add colors to my infobox. By following this tutorial in FANDOM https://community.fandom.com/wiki/Help:Infoboxes, I tried to change the background and the secondary background to blue and light blue in Common.css. Here's my wiki's Common.css page https://tsv.miraheze.org/wiki/MediaWiki:Common.css

However, my infobox only change the secondary background, not the overall background. The title background color doesn't seem to change either, despite the tutorial said it should be the secondary background 's color. Here's my wiki's infobox page https://tsv.miraheze.org/wiki/Template:Infobox_person

I am very new to this so I don't know what I did wrong. However, I don't think it's browser cache issue because I made the change to the background and the secondary background at the same time. One doesn't work and One does

Thank you in advanced for any help.

Btw, this is what my infobox looks like right now. I want the background to turn light blue, and the title background the same color as the header.

[dapper girder]

pi-background and pi-secondary-background are CSS variables. You can't target them in the CSS selector, instead you can just apply the selector to the entire infobox and then set the variables instead of the background-color property to these colors:

.portable-infobox.pi-theme-person {
   --pi-background: #8fd3fe;
}
.portable-infobox.pi-theme-person {
   --pi-secondary-background: #6ac5fe;
}