/* --------------------- Open Props --------------------------- */
/* the props */
@import "https://unpkg.com/open-props";
/* optional imports that use the props */
@import "https://unpkg.com/open-props/normalize.min.css";
@import "https://unpkg.com/open-props/buttons.min.css";
/* ------------------------------------------------------------ */
body {
  font-family: sans-serif;
  text-align: center;
  padding: 0 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  margin: 0 auto;
  padding: 2rem;
}
h1 > span,
h2 > span,
h3 > span,
h4 > span,
h5 > span,
h6 > span {
  color: var(--red-7);
}

h1 {
  font-size: 2.4rem;
}

h2 {
  font-size: 1.2rem;
  padding: 1rem;
}

.imageWrapper {
  margin: 2em;
  display: flex;
  gap: 2em;
  justify-content: center;
}
.imageWrapper > * {
  flex-shrink: 1;
}
.imageWrapper > * > img, .imageWrapper > * > canvas {
  margin: auto;
  border: var(--border-size-1) solid var(--surface-3);
}
.imageWrapper canvas {
  max-width: 100%;
}

.controls,
.palette-options {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: center;
}
.controls button,
.palette-options button {
  width: 10rem;
  /* transition: all 0.2s ease-in-out; */
}
.controls button.selected,
.palette-options button.selected {
  --_bg-dark: var(--red-6);
  --_bg: var(--red-5);
  --_ink-shadow-light: 0 1px 0 var(--red-8);
  --_ink-shadow-dark: 0 1px 0 var(--red-8);
  --_highlight-light: var(--red-2);
  --_highlight-dark: var(--red-2);
  --_border: var(--red-8);
}

.stats,
.info {
  margin: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 40rem) {
  .imageWrapper {
    flex-direction: column;
  }
}
div._chartistry {
  --chart-axis: var(--gray-8);
  --chart-color: var(--gray-12);
  margin: 1em;
}
@media (prefers-color-scheme: dark) {
  div._chartistry {
    --chart-axis: var(--gray-2);
    --chart-color: var(--gray-1);
  }
}
div._chartistry ._chartistry_axis_marker {
  stroke: var(--chart-axis);
}
div._chartistry ._chartistry_line {
  stroke: var(--red-6);
}
div._chartistry ._chartistry_rotated_label, div._chartistry ._chartistry_tick_label {
  font-family: sans-serif;
}
div._chartistry svg text {
  fill: var(--chart-color);
}