svg {
  /* background-color: #f1f1f1; */
  display: block;
  width: 100%;
}

.svg-container {
  /* width: 800px; */
  margin: 0 auto;
}

path {
  stroke: #ec3232;
  stroke-width: 0.5;
}

path:hover {
  fill: #bada55;
}

#tooltip {
  position: absolute;
  visibility: hidden;
  background: var(--color-secondary);
  padding: 5px;
  border: 1px solid var(--color-accent-light);
  border-radius: 3px;
}

.variable {
  background-color: var(--color-accent-light);
  cursor: pointer;
  color: var(--color-primary);
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 3px;
  text-decoration: underline;
  border: var(--color-secondary) 1px solid;
}

.variable:hover {
  background-color: var(--color-accent);
  border: var(--color-primary) 1px solid;
}