body {
  margin: 0;
  overflow-x: hidden;
}

#page {
  width: 100vw;
  height: 100vh;
  perspective: 1px;
  perspective-origin: center center;
  overflow-x: hidden;
}

#parallax {
  transform-style: preserve-3d;
  height: 120vh;
}

.layer {
  background-position: bottom center;
  background-size: cover;
  background-repeat: repeat-x;
  position: absolute;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

a > img {
  width: 100%;
}

#layer_0 {
  transform: translate3d(0px, 5%, -0.7px) scale(3.5);
}

#layer_1 {
  transform: translate3d(0, 95%, -0.3px) scale(2.5);
}

#layer_2 {
  transform: translate3d(0, 55%, 0.3px) scale(2);
}

#layer_3 {
  transform: translate3d(0, 280%, 0.1px) scale(2.1);
}

#layer_4 {
  transform: translate3d(0, 243%, 0.5px) scale(1.3);
}

#layer_5 {
  transform: translate3d(0, 110%, 0.1px) scale(2);
}

#layer_6 {
  transform: translate3d(0, 40vw, 0.7px) scale(0.4);
  height: max-content;
}

#layer_6a {
  position: absolute;
  top: 0;
}

#layer_6b {
  position: absolute;
  top: 5vw;
}

#layer_6c {
  position: absolute;
  top: 10vw;
}

#layer_7 {
  transform: translate3d(0, 195%, 0.7px) scale(0.6);
}

#smartphoneView {
  display: none;
}

@media (max-width: 1000px) {
  #parallax {
    display: none;
  }
  #smartphoneView {
    display: block;
    height: 100vh;
  }

  .layer {
    background-position: bottom center;
    background-size: cover;
    background-repeat: repeat-x;
    position: absolute;
    width: 100%;
    top: 50vh;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    height: 21vh;
    flex-direction: column;
    justify-content: space-around;
  }

  .main_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  a > img {
    transform: scale(2);
  }
}