Additional CSS not working

Great plugin. I’ve just setup a new WordPress site and installed this plugin but additional CSS does not seem to work. I’m using an Astra theme which I’ve customised. Most of that was easy but there were three areas that stayed white with the built-in options. I was able to add the following CSS to change the white to a light grey background:

.ast-separate-container .ast-article-single {
background-color: #f7f7f7;
}
.ast-separate-container .comment-respond {
background-color: #f7f7f7;
}
.ast-separate-container .ast-article-post {
background-color: #f7f7f7;
}

However, if I put body.wp-night-mode-on before any of them it doesn’t work. Example:

body.wp-night-mode-on .ast-separate-container .ast-article-single {
background-color: #f7f7f7;
}

I’ve looked through other threads but didn’t find anything to help, though I did try some of the code that was posted. This didn’t work:
body.wp-night-mode-on a:visited {
color: #ffffff;
text-decoration: underline;
}

But this did:
.wp-night-mode-on {
filter: invert(100%);
}

Also this worked on some of the page but not others (including the three areas mentioned above):
body.wp-night-mode-on *:not(img) {
background: #1e1e1e;
}

Thanks.