*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

body {
  -webkit-font-smoothing: antialiased;
}

a {
  color: currentColor;
}

:root {
  --color-bg: #f4f3f0;
  --color-text: #000;
  --color-text-muted: #666;
  --color-stroke: #bbb;
  --color-military: #d32d20;
  --color-health: #dd722c;
  --color-education: #3a818f;
  --color-text-inverted: #f4f3f0;

  --font-size-xl: 2.441rem;
  --font-size-lg: 1.563rem;
  --font-size-md: 1rem;
  --font-size-sm: 0.8rem;
}

[data-category="military"] {
  --color-category: var(--color-military);
}

[data-category="health"] {
  --color-category: var(--color-health);
}

[data-category="education"] {
  --color-category: var(--color-education);
}

body {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  font-size: var(--font-size-md);
  background-color: var(--color-bg);
  color: var(--color-text);
}

hgroup {
  text-transform: uppercase;
}

h1 {
  font-weight: 600;
  font-size: var(--font-size-xl);
  line-height: 1;
}

hgroup p {
  margin-block-start: 0.5em;
  font-size: var(--font-size-lg);
}

hgroup span {
  background-color: var(--color-category);
  padding: 0.125em 0.25em;
  color: var(--color-text-inverted);
}

main {
  margin: 4rem auto;
  width: min(100% - 2rem, 60rem);
}

main > * + * {
  margin-block-start: 2rem;
}

footer {
  color: var(--color-text-muted);
}

.dumbbell-chart svg {
  font-size: var(--font-size-md);
  display: block;
  max-width: 100%;
  height: auto;
}

.dumbbell-chart .row__line,
.dumbbell-chart .axis line {
  stroke: var(--color-stroke);
}

.dumbbell-chart .row__target-gap {
  fill: var(--color-military);
  fill-opacity: 0.2;
}

.dumbbell-chart .row__line {
  stroke-dasharray: 4;
}

.dumbbell-chart .target__line {
  stroke: var(--color-military);
  stroke-dasharray: 4;
}

.dumbbell-chart .target__label__value,
.dumbbell-chart .row__gap-label {
  fill: var(--color-military);
  font-weight: 600;
}

.dumbbell-chart .row__gap-label,
.dumbbell-chart .marker__label {
  font-size: var(--font-size-sm);
  stroke: var(--color-bg);
  stroke-width: 3px;
  stroke-linejoin: round;
  stroke-linejoin: round;
  paint-order: stroke;
}