scrolling-panels {
  --chart-text-color: #a3a3a3;
  --chart-text-typical-color: black;
  --chart-text-specific-color: #e06666;

  --chart-bar-color: #dadada;
  --chart-bar-typical-color: black;
  --chart-bar-specific-color: #e06666;
  --chart-secondary-font-family: "Barlow Condensed", var(--sans, sans-serif);

  --color-democrat: #70a8dc;
  --color-democrat-dark: #6093C2;
  --color-republican: #e06666;
  --color-republican-dark: #C65757;
}

scrolling-panels .impact {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 5px;
  border: 1px solid lightgray;
  padding: 25px;
  max-width: min(90%, 400px);
  position: absolute;
  left: 30px;
}

scrolling-panels .typical {
  color: var(--chart-text-typical-color);
  font-weight: bold;
}

scrolling-panels .blue {
  color: var(--color-democrat-dark);
  font-weight: bold;
}

scrolling-panels .red {
  color: var(--color-republican);
  font-weight: bold;
}

scrolling-panels .specific {
  color: var(--chart-text-specific-color);
  font-weight: bold;
}

scrolling-panels .comparison-outer {
  height: min(90%, 800px);
  width: min(90%, 800px);
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}

scrolling-panels .img-outer {
  height: 50%;
  display: flex;
  flex-direction: column;
  margin: 15px 0;
}

scrolling-panels .img-outer:first-of-type {
  justify-content: end;
}

scrolling-panels .img-outer:last-of-type {
  justify-content: start;
}

scrolling-panels .img-outer h2, #img-full h2 {
  font-family: var(--chart-secondary-font-family);
  font-weight: normal;
  text-transform: none;
}

scrolling-panels .img-outer img {
  object-fit: contain;
  max-height: 80%;
  max-width: 100%;
}

scrolling-panels #img-full.comparison-outer {
  width: min(90%, 1000px);
}

scrolling-panels #img-full .img-outer {
  height: 70%;
  background-image: url(./images/gerrymandered.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  justify-content: center !important;
}

scrolling-panels #img-full h2 {
  text-align: center;
}

@media (max-width: 600px) {
  scrolling-panels .impact {
    position: relative;
    left: unset;
  }
  scrolling-panels #img-full .img-outer {
    background-image: url(./images/gerrymandered-mobile.jpg);
  }
}