index.css

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');

:root {
  font-family: 'Quicksand', sans-serif;
  --fillColor: #2233cc22;
  --highlightedColor: #007d8688;
  --selectedColor: #33ff0088;
  --strokeColor: #11223388;
  --controlColor: #ff330088;
  --controlColorLine: #ff330066;
  --backgroundColor: darkturquoise;
  --gridColor: #0000001d;
  --highlightPointColor: #26865181;
  --textColor: #22334455;

  --fontSizeHorizontal: calc(2 * (0.5vh + 0.5vw));
  --fontSizeVertical: calc(2.5 * (0.5vh + 0.5vw));
  --fontSizeFixed: 17px;
  --fontSize: var(--fontSizeFixed);
}

svg path {
  stroke: var(--strokeColor);
}

svg #highlightCircle {
  fill: var(--highlightedColor);
}

svg #selectionCircle {
  fill: var(--selectedColor);
}

svg #controlCircle,
svg #controlCircle2 {
  fill: var(--controlColor);
}

svg #controlPath1,
svg #controlPath2 {
  stroke: var(--controlColorLine);
  stroke-width: 2;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-weight: normal;
  color: var(--textColor);
}

body,
html,
div,
span {
  font-size: var(--fontSize);
  line-height: 1;
}

svg,
#datadiv,
#backgroundImage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: pre-wrap;
}

#datadiv span {
  color: var(--highlightPointColor);
  font-weight: bold;
}

div,
svg,
span,
body,
html {
  -moz-user-select: none;
  -webkit-user-select: none;
}

#transformedPattern rect {
  stroke: var(--gridColor);
  fill: none;
}

#backgroundImage {
  opacity: 0.3;
  background-color: var(--backgroundColor);
}

#alertUser {
  box-sizing: border-box;
  visibility: hidden;
  opacity: 0;
  --alertWidth: 50vmin;
  width: var(--alertWidth);
  margin-left: calc(-0.5 * var(--alertWidth));
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: calc(var(--alertWidth) / 100);
  padding: calc(var(--fontSize) * 0.5) calc(var(--fontSize) * 2);
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: calc(var(--fontSize));
  font-weight: normal;
  transition: opacity 0.5s;
}

@media screen and (min-aspect-ratio: 10/9) and (min-height: calc(1rem * 40)) {
  :root {
    --fontSize: var(--fontSizeHorizontal);
  }
}

@media screen and (max-aspect-ratio: 10/9) and (min-height: calc(1rem * 40)) {
  :root {
    --fontSize: var(--fontSizeVertical);
  }
}