styles.css

/* styles.css */
body {
    margin: 0;
}

.outsideWrapper {
  width: 100%;
  /*min-width: 224px;*/
  max-width: 384px;
  max-height: 384px;
  height: 0;
  padding-bottom: 100%; /* Maintain a 1:1 aspect ratio */
  position: relative;
}

.insideWrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  margin: auto;
  border: 1px solid black;
  width: 100%;
  height: 100%;
  max-width: 384px;
  max-height: 384px;
}

.viz {
  width: 100%;
  height: 100%;
}

.canvasBGImage {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  margin: auto;
  width: 100%;
  height: 100%;
  max-width: 384px;
  max-height: 384px;
}

.flex {
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
  max-width: 384px;
}

.flexWrapper {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
}