Global CSS doesn't apply to a class section in Pelican's bootstrap3 theme

Question

I've got a blog. I use Pelican 4.8 and the theme pelican-bootstrap3. It works, but I wanted to have dark mode that follows the OS general setting. To do this I added some custom CSS:

./content/extra/custom.css

your @media (prefers-color-scheme: dark) {
  body {
    background: #000;
    color: #7fff00;
    outline: 5px dashed #753;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: #fff;
  }
}text

This also works, mostly. My site now follows the operating systems light/dark them...apart from the sidebar. I'm not a web coder, so I'm fumbling my way through this.

The generated html that Pelican spits out according to the page source, looks like this:

https://paste.centos.org/view/191ae06e

The first several lines (the about me section) follows dark mode as expected, but then I get to the sidebar, and the background colour of the sidebar, starting at the social links, never changes. It starts here:

<section class="well well-sm">
<ul class="list-group list-group-flush">

So I guess my question is, how do I add CSS or html to tell a section class to follow my OS system-wide theme? I'm using pygments style monokai if that makes any difference.

tried system wide custom CSS, but it didn't take effect in the sidebar