Trying to toggle a minimap display in Sugarcube.

So I referred to this old thread to create a minimap in my twine game: https://twinery.org/forum/discussion/1630/macro-mini-map-to-go

I modified the minimap a little and put it on the right hand side of the page, so that it wouldn't take up space on my StoryMenu UI bar.

Now on the StoryMenu UI bar, I added a click macro: <<click "Toggle Minimap">><<toggleclass "#minimap" "display">><</click>>

Here are my stylesheets for the minimap with "display: none" as default for the #minimap:

#minimap
{
display: none;
position: fixed;
right: 20px;
top: 20px;
width: 280px;
height: 280px;
overflow: hidden;
}
#minimap img
{
position: absolute;
right: 0px;
top: 0px;
transition: all 2s;
-webkit-transition: all 2s;
}
#minimap-overlay
{
position: absolute;
right: 0px;
top: 0px;
width: 280px;
height: 280px;
background-image: url(Images/Map-Overlay.png);
}


My problem is that it is not working, and the minimap remains hidden (due to the default display:none). Did I do anything wrong? Should I use visibility: hidden instead?

As an extra question, due to me putting the minimap at the right-hand side of the passage, the minimap tends to obscure text / images within the passage due to its size, so I would also like to add a toggleable "margin-right: 285px" or something like that into the body element, using the same click macro, but I have no idea how to do that.

Sorry if this question is rather simple, but I'm still new and terrible at twine and css in general >_<