body, article {
  --paper-color: #f5f4f2;
}
.embed-infographic:has(data-center) {
  min-height: 100vh;
  max-width: 100vw !important;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

data-center, figure {
  --border-color: #AAA;
  --dark-border-color: #444;
  --border-width: 2px;
  --border-width-bar: 2px;
  --border-width-fade: 2px;
  --fade-color: #888;
  --purple: #E040FB;
  --orange: #FF6D00;
  --yellow: #FFD600;
  --green: #00E676;
  --darkgreen: #00B359;
  --red: #cd2b2a;
  --darkred: #9E1C1B;

  --highlight-color: var(--green);
  --highlight-color-dark: var(--darkgreen);
  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --bar-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08);

  --message-color: #8b5cf6;
  --message-color-fade: #F9F6FF;
  --data-center-color: black;
  --data-center-color-fade: #F2F2F2;
  --water-color: #4EAFDA;
  --electricity-color: #e29400;
  --construction-color: #e37664;
  --planned-color: #9CA59E;
  --land-color: #8db88f;
  --other-color: #e37664;
}

data-center section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--page-padding);
  background: var(--paper-color);
  border: 1px solid var(--border-color);
  max-width: min(350px, 100%);
  box-sizing: border-box;
  margin: 0px;
}

data-center section > * {
  margin: 0;
}

data-center section > p {
  font-family: var(--serif);
}

data-center section  .icon-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
  margin-top: 20px;
  width: 100%;
}

data-center section  .icon-grid__item {
  width: 100%;
  height: auto;
}

data-center section  .icon-grid--bottles .icon-grid__item {
  fill: var(--water-color);
}

data-center section  .icon-grid--lightbulbs .icon-grid__item, data-center section  .icon-grid--clocks .icon-grid__item {
  fill: var(--electricity-color);
}