
       #scrolly {
        position: relative;
        padding: 1rem;
        width: min(1400px, calc(100vw - 2rem)) !important;
        max-width:none;

      }
      .scrolly-overlay {
        position: relative;
        padding: 0;
        max-width: 35rem;
        margin: 0 auto;
      }
      .bold-purple {
          font-weight: bold;
          color:#976ED3
      }
      .bold-blue {
          font-weight: bold;
          color:#697AE0
      }
      .bold-ltblue {
          font-weight: bold;
          color:#8E9DDD
      }
      .sticky-thing {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        width: 100%;
        margin: 0;
        z-index: 0;
        top: 0;
        height: 100vh;
        /* Center everything inside */
        display: flex;
        justify-content: center;
        flex-direction: column;
        justify-content: center;
      }

      .step {
        margin: 0 auto 2rem auto;
        margin-bottom: 25rem;
        background-color: #eee;
        background-color: #fff;
        color: black;
      }

      .step p {
        text-align: left;
        padding: 1rem;
        font-size: 1.25rem;
      }
      .hidden { visibility: hidden; }

      /* When it's less than 700 pixels wide, do normal scrollytelling */
      @media only screen and (min-width: 700px) {
        #scrolly.side-by-side {
          display: flex;
        }

        #scrolly.side-by-side > div {
          flex-basis: 0;
          flex-grow: 1;
          flex-shrink: 1;
          padding: 1em;
        }

        #scrolly.side-by-side .scrolly-overlay {
          margin-top: 70vh;
          order: 0;
          /* Change these to adjust sizing options */
          min-width: 15rem;
          max-width: 20rem;
        }

        #scrolly.side-by-side .sticky-thing {
          order: 1;
          flex-grow: 2;
        }
      }