body,
html {
  margin: 0;
  padding: 0;
  background-color: #000000;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: white;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

h1,
h2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3em;
  font-weight: normal;
  opacity: 1;
  z-index: 9;
  width: 90%;
  text-align: center;
  margin-block-end:0; 
}
h2 p em{
  font-size:16px;
  line-height: 16px !important;
}

h1 {
  top: 3vw;
  text-transform: uppercase;
}

h2 {
  top: 82vh;
  font-size: 1.7em;
}

.cube.single-video-container {
  position: absolute;
  top: 50vh;
  left: 50vw;
  width: 100vw;
  max-width: 1200px;
  transform: translate(-50%, -50%);
}

.chapter {
  position: relative;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  z-index: 8;
  padding: 10px 10px;
}

.quote,
.text,
.animation {
  margin-left: 0.5em;
  margin-right: 0.5em;
  position: relative;
  z-index: 99;
  transform: translate3d(0, 0, 0);
}
.text {
  /* font-family: "PT Serif", serif; */
  padding: 0.8em 1em 1px 1em;
  font-size: 1.2em;
  line-height: 1.4;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  backdrop-filter: blur(5px);

  p {
    margin: 0 0 1em 0;
  }
}
.centered {
  text-align: center;
  margin-right: auto !important;
}
.quote img {
  width: 100%;
  height: auto;
  position: relative;
}
@media screen and (min-width: 700px) {
  .text {
    max-width: 640px;
    margin-left: auto;
    margin-right: 1em;
  }
  .text.center {
    margin-left: auto;
    margin-right: auto;
  }
  .text.left {
    margin-left: 1em;
    margin-right: auto;
  }
  .quote {
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    max-width: 840px;
  }
  .quote.right-aligned {
    margin-left: auto;
    margin-right: 1em;
  }
  .quote.left-aligned {
    margin-left: 1em;
    margin-right: auto;
  }
}
.shadowed {
  &:after {
    content: "";
    inset: 0;
    position: absolute;
    background: radial-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    filter: blur(20px);
    z-index: -1;
  }
}
.document-behind-text {
  position: absolute;
  right: 10vw;
  top: 50%;
  transform: translateY(-50%);
  > div {
    height: 90vh;
  }
  img {
    height: 100%;
    width: auto;
  }
}
.illustration {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}
.illustration img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  will-change: transform;
}
.vertical-illustration {
  top: 5vh;
  transform: none;
}
.vertical-illustration img {
  position: absolute;
  max-height: 90vh;
  width: auto;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.chapter-one .document {
  top: 52%;
  left: 68%;
  width: unset;
  height: auto;
}

.chapter-one-duplicate .document {
  top: 52%;
  left: 68%;
  width: unset;
  height: auto;
  position: absolute;
}

.quote-wrapper {
  position: relative;
}

.tree-video {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  aspect-ratio: 174/1000;
  height: 120vh;
  z-index: -1;
}
.tree-video.left-edge {
  left: 0;
}
.tree-video.right-edge {
  right: 0;
  transform: translateY(-50%) scaleX(-1);
}

.quote-wrapper .animated-quote {
  position: sticky;
  text-align: center;
  margin: 0 auto;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 2rem;
  /* font-family: "Courier New", Courier, monospace; */
}
.quote-wrapper .animated-quote span {
  display: inline-block;
  padding: 0.5em;
  background-color: rgba(0, 0, 0, 0.5);
}

.image-container {
  position: sticky;
  text-align: center;
  margin: 0 auto;
  top: 50%;
  transform: translate(0, -50%);
}
.image-container.centered {
  top: 50%;
}

.drawing-gallery {
  display: flex;
  justify-content: center;
  gap: 1em;
  overflow: hidden;
}

.drawing-gallery img {
  height: 25vw;
  width: auto;
}

.smaller-drawings img {
  height: 20vw;
}

.drawing-grid {
  width: 80vw;
  margin: 0 auto;
  display: flex;
  line-height: 1;
  gap: 3em;
}
.drawing-item {
  position: relative;
}
.drawing-item img {
  width: 100%;
  object-fit: cover;
}
.land {
  text-align: center;
  position: sticky;
  top: 10vh;
  img {
    max-height: 80vh;
    max-width: 100%;
    height: auto;
  }
}
.land img {
  width: 90vw;
}

.chair-container {
  /* position: sticky;
  top: 25%;
  transform: translate(0%, 50%); */
  position: relative;
  text-align: center;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.chair-container img {
  height: 25vw;
  width: auto;
}
.chair-container img.center {
  margin-left: -5vw;
  margin-right: -5vw;
}

.single-video-container {
  text-align: center;
  max-height: 100vh;
  max-width: 100vw;
}
.rubiks-cube .single-video {
  max-width: 100%;
  height: auto;
}

.video-pic-video {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;

  display: flex;
  justify-content: space-evenly;
  gap: 1em;
}
.video-pic-video .vertical-video {
  /* flex: 1 0 25%;
  max-width: 25%; */
  height: 80vh;
}
.video-pic-video .pic {
  /* flex: 1 0 20%; */
  aspect-ratio: 800 / 1652;

  img {
    height: 80vh;
    width: auto;
  }
}

.maps .illustration {
  max-width: 90vw;
  max-height: 90vh;
  margin: auto;
}

img.close-up,
img.street-scene {
  position: absolute;
}

.wide-image img {
  width: 100%;
  height: auto;
}

.island .single-video-container {
  position: relative;
  z-index: 99;
}
.vertical-video.camp {
  aspect-ratio: 9/16;
  max-height: 75vh;
  width: auto;
}

.vertical-images-gallery {
  position: sticky;
  top: 2vh;
  display: flex;
  justify-content: space-evenly;
  gap: 3vw;
  margin-left: 6vw;
  margin-right: 6vw;

  img {
    max-height: 90vh;
    max-width: 100%;
    height: auto;
  }
}

.phones {
  display: flex;
  justify-content: flex-end;
  gap: 3vw;
  margin-left: auto;
  margin-right: 0;
  position: relative;

  img {
    max-width: 500px;
    height: auto;
  }
}
#text-over-phone {
  position: absolute;
  top: 160px;
  left: 1em;
  max-width: 400px;
}

.pills {
  height: 1040px;
  margin-top: -100px;
}
.pill {
  position: absolute;
  width: 100px;
  height: auto;
}
.pill.p-left {
  left: 1vw;
}
.pill.p-right {
  right: 1vw;
}
.pill#left-1,
.pill#right-1 {
  top: 100px;
}
.pill#left-2,
.pill#right-2 {
  top: 300px;
}
.pill#left-3,
.pill#right-3 {
  top: 500px;
}
.pill#left-4,
.pill#right-4 {
  top: 700px;
}
.pill#left-5,
.pill#right-5 {
  top: 900px;
}
.pill#right-2,
.pill#left-4,
.pill#right-4 {
  transform: scale(-1, 1);
}

.end {
  margin-top: 50vh;
}

.cube-end {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
}

.credits {
  text-align: center;
  font-size: 1.1em;
  line-height: 1.4;
  position: relative;
  z-index: 99;
  transform: translate3d(0, 0, 0);

  small {
    font-style: italic;
  }
}


/* unvisited link */
a:link {
  color: #eeeeee;
}

/* visited link */
a:visited {
  color: #eeeeee;
}

/* mouse over link */
a:hover {
  color: #dddddd;
}

/* selected link */
a:active {
  color: #ffffff;
}

.chapter-one-duplicate .document {
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0); /* triggers GPU layer */
  will-change: transform;
  backface-visibility: hidden;
  image-rendering: crisp-edges;
}