/* 

Begin responsive design and scrollytelling

*/

svg {
  display: block;

}

/* Scrollytelling sections can be wider than the normal 700px width */
.scrollytelling.story-body {
  max-width: 960px;
}

/* .demo {
  position: fixed;
  top: 100px;
  left: 20%;
  width: 100px;
  height: 100px;
  background: red;
} */

.scrollytelling {
  display: flex;
  flex-wrap: wrap;
}

/* Everything inside of scrollytelling gets normal full width... */
.scrollytelling > * {
  flex-basis: 100%;
  flex-shrink: 0;
}

/* ...except the .steps and .chart! They'll share a row, sometimes */
.scrollytelling > .steps,
.scrollytelling > .chart {
  flex-basis: 100%;
  flex-shrink: 0;
  flex-grow: 1;
}

/* The bigger 'flex-grow' the more space it takes up */
.scrollytelling > .chart {
  flex-grow: 3;
  overflow: hidden;
}

.scrollytelling .chart {
  margin-right: 15px;
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scrollytelling .chart svg {
  margin: auto;
}

.scrollytelling .chart img {
  width: 100;
}

.scrollytelling .step {
  max-width: 30rem;
  margin: 0 auto;
  margin-bottom: 80vh;
  padding: 30px;
  background: rgb(18,18,18, 0.9);
  /* border: solid black 1px; */
  pointer-events: auto;
}

.scrollytelling .step *:first-child {
  margin-top: 0;
  padding-top: 0;
}

.scrollytelling .step *:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* This is a weird spacing fix */
.scrollytelling .steps {
  /* display: flex;
  justify-content: center; */
  z-index: 10;
  padding-bottom: 1vh;
  pointer-events: none;
}

/* This is the point where it collapses */
@media (max-width:900px) {
  .scrollytelling > * {
      flex-basis: 100% !important;
  }
  .scrollytelling .chart {
      margin-right: 0;
  }
}

.color-thing {
  color: white;
}

.color-thing a {
  color: white;
}

/* 

End scrollytelling 

*/