out of curiosity, because this is css and the way twine works with html, your code works for both harlowe and sugarcane right?
No, not as is. They have different html structures, and different ways of accessing tags in CSS. SugarCube add tags as classes, but in Harlowe you'd need to access the attribute (for v2.x) or set it up so that tags are added as classes (for v1.x). The idea is the same, but you'd need to change the selectors.
Here's a link to a relevant forum post by greyelf from the archive. The initial post deals with Harlowe 1.x. Later in the thread is an update for working with Harlowe 2.x.
I don't recommend using Sugarcane at all if you can avoid it; it's probably better to install SugarCube 2 if you're using Twine 1. It's outdated and no longer supported by anyone. Of the Twine 1 formats, the only one you might want to use is Jonah, and even then only if you really, really need its specific feature set.