body {
    margin: 0;
    font-size: 18px;
    font-family: "Roboto", "Open Sans", sans-serif;
    text-rendering: optimizeLegibility;
  }

  .content {
    max-width: 700px;
    margin: auto;
  }

  .header {
    padding: 3em 0;
    color: #ffffff;
    text-shadow: 2px 2px 2px #242424;
    background-image: url("images/banner.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 70svh;
    position: relative;
    margin-bottom: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header p {
    font-size: 16px;
  }

  a {
    color: #f05349;
  }

  .footer {
    background: #f4f4f4;
    text-align: center;
    font-size: 0.8em;
    margin-top: 4em;
    padding: 4em 0;
  }

  figure {
    margin: 0;
    padding-bottom: 1.2em;
  }

  figcaption {
    font-size: 0.8em;
    text-align: center;
    margin-top: 0.5em;
    color: #666;
  }

  h1 {
    font-family: "Open Sans", Georgia, serif;
    font-weight: bold;
    font-size: 3em;
    line-height: 1.1;
  }

  .subhead {
    font-family: "Roboto", "Open Sans", sans-serif;
  }

  iframe,
  img,
  video {
    max-width: 100%;
  }

  p {
    line-height: 1.6;
    margin: 0;
    padding-bottom: 1.2em;
  }

  ul {
    margin: 0;
    padding-bottom: 1em;
    line-height: 1.6;
  }

  iframe {
    padding-bottom: 1.2em;
  }

  .full-width figure {
    text-align: center;
  }

  code {
    font-family: 'Courier New', monospace;
    background: #fff880;
  }

  /* margin on mobile */
  @media (max-width: 640px) {
    body {
      font-size: 18px;
    }

    .content {
      padding-left: 0.5em;
      padding-right: 0.5em;
    }
  }

/* SCROLLY */

.scrolly-container {
    position: relative;
    margin-bottom: 1.2em;
}

.sticky-thing {
    position: sticky;
    top: 0;
    transform: translate(0px, 0px);
    z-index: 0;
    height: 100svh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
    /* Center everything inside */
    /* display: flex;
    justify-content: center;
    flex-direction: column;
    justify-content: center;
    overflow: hidden; */
}

.sticky-thing > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;  
}

.video-container {
    position: sticky;
    top: 0;
    z-index: -1;
}

.scrolly-container video {
    position: absolute;
    top: 0;
    height: auto;
    width: 100%;
}

.sticky-thing iframe {
    position: absolute;
    top: 0;
    max-width: 100%;
    min-height: 100vh;
}

.steps-container {
    transform: translate3d(0,0,0);
    position: relative;
    padding: 0;
    z-index: 10;
    max-width: 35rem;
    margin: 0 auto;
    padding-bottom: 4em;
}

.step {
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50svh;
    transform: translate(0px, 0px);
    margin-bottom: 70vh; /* change this to adjust the padding between steps */
}

.step p {
    text-align: left;
}

.step p:last-child {
    padding: 0;
}

.step > * {
    width: 700px;
    margin-left: 1.3em;
    margin-right: 1.3em;
    text-align: center;
    padding: 1.2em !important;
    background-color: #ffa880cc;
    border-radius: 20px;
}

.sticky-thing > canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;  
}

/* When it's less than 700 pixels wide, do normal scrollytelling */

@media only screen and (min-width: 700px) {
    .scrolly-container.side-by-side {
        display: flex;
    }

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

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

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