CSS distorting Square Space interface and functionality

I'm working on creating an image map that can be interacted with that has pop up information when someone hovers over a specific portion of the map. I need to allow the map to be responsive to screen size else all my plot points are distorted. I have the code working perfectly fine in my code editors but when importing it into Square Space, I've found that the CSS distorts everything for some reason.

Multiple issues include removing the "ADD BLOCK" button, the image clipping into other panels as everything is shifted lower than it should be- also causing an issue where my hover pop ups show up in a different location then they should. I tried making some changes to the CSS and came across new issues- being unable to scroll. I've tried to do everything I can think of to fix my code but can't seem to fix one thing without Square Space freaking out on me. What I can say for certain is that display: flex; is a necessary part of my code but ruins everything. The problem is that even removing it, there's still issues with the "ADD BLOCK" button either crashing or the icons being obnoxiously large. I want to know why this can work in other instances but the instant I migrate to Square Space it freaks out. Thanks. Here is my CSS below:
 

<style>
    body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    #scroll-container {
      overflow: auto;
      width: 100%;
      height: 100%;
    }

    #svg-container {
      position: relative;
      width: 100%;
      height: 100%;
    }

    svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      max-width: 100%;
      height: auto;
    }

    circle {
      fill: transparent;
      stroke: red;
      stroke-width: 2;
      cursor: pointer;
    }

    .tooltip {
      position: absolute;
      background-color: rgba(255, 255, 255, 0.8);
      padding: 10px;
      border-radius: 5px;
      display: none;
    }
  </style>