body {
  background: #0a0a0a;
  margin: 0;
  padding: 0;
}
:root {
  --index: calc(1vw + 1vh);
}
/***** episode content *****/
.episode {
  height: 100vh;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  top: 0;
  width: 100%;
}
.episode img {
  max-width: unset;
}
.episode__wrapper {
  height: 100vh;
  margin-left: -25px;
  margin-right: -25px;
  position: relative;
}

.episode__wrapper:after,
.episode__wrapper:before {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#0a0a0a),
    color-stop(80%, #0a0a0a),
    to(hsla(0, 0%, 4%, 0))
  );
  background-image: linear-gradient(
    90deg,
    #0a0a0a,
    #0a0a0a 80%,
    hsla(0, 0%, 4%, 0)
  );
  bottom: 0;
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 50vw;
  z-index: 11;
}

.episode__wrapper:before {
  left: -42vw;
}

.episode__wrapper:after {
  right: -42vw;
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}
/***** episode background animation *****/
.episode__element {
  position: absolute;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  will-change: transform;
}

.episode__light {
  bottom: calc(var(--index) * -10.4);
  left: calc(var(--index) * -15.4);
  -webkit-transform: rotate(-13deg);
  -ms-transform: rotate(-13deg);
  transform: rotate(-13deg);
}

.episode__light img {
  width: calc(var(--index) * 83.7);
}

.episode__light-small {
  bottom: calc(var(--index) * -9.44);
  left: calc(var(--index) * 8.57);
  -webkit-transform: rotate(187deg);
  -ms-transform: rotate(187deg);
  transform: rotate(187deg);
  z-index: 4;
}

.episode__light-small img {
  width: calc(var(--index) * 56.9);
}

.episode__light-middle {
  bottom: calc(var(--index) * -37.42);
  left: calc(var(--index) * -12.41);
  -webkit-transform: rotate(167deg);
  -ms-transform: rotate(167deg);
  transform: rotate(167deg);
  z-index: 10;
  opacity: 0.7;
}

.episode__light-middle img {
  width: calc(var(--index) * 82.7);
}

.episode__sun {
  background-color: #ffb434;
  border-radius: 50%;
  bottom: calc(var(--index) * -1.1);
  -webkit-box-shadow: 0 -1.04px 31.21px 0 rgba(255, 180, 52, 0.7);
  box-shadow: 0 -1.04px 31.21px 0 rgba(255, 180, 52, 0.7);
  height: calc(var(--index) * 18);
  left: calc(var(--index) * 25.6);
  width: calc(var(--index) * 18);
  z-index: 1;
}

.episode__rect {
  bottom: 0;
  left: calc(var(--index) * 2);
  z-index: 2;
}

.episode__rect img {
  height: calc(var(--index) * 7.23);
}

.episode__tree-left,
.episode__tree-right {
  z-index: 8;
}

.episode__tree-left {
  bottom: calc(var(--index) * -0.3);
  left: 0;
}

.episode__tree-left img {
  height: calc(var(--index) * 26.3);
}

.episode__tree-right {
  bottom: calc(var(--index) * -0.1);
  left: calc(var(--index) * 36.6);
}

.episode__tree-right img {
  height: calc(var(--index) * 19.8);
}

.episode__tree-2-right {
  bottom: calc(var(--index) * -0.4);
  left: calc(var(--index) * 24.6);
  z-index: 8;
}

.episode__tree-2-right img {
  height: calc(var(--index) * 28.53);
  margin-bottom: -30px;
  margin-right: -30px;
}

.episode__tree-3-left,
.episode__tree-3-right {
  z-index: 9;
}

.episode__tree-3-left {
  bottom: calc(var(--index) * -0.6);
  left: calc(var(--index) * -0.6);
}

.episode__tree-3-left img {
  height: calc(var(--index) * 27.3);
}

.episode__tree-3-right {
  bottom: calc(var(--index) * -0.2);
  left: calc(var(--index) * 40.6);
}

.episode__tree-3-right img {
  height: calc(var(--index) * 26.95);
}
.episode__mountain-1-left,
.episode__mountain-1-right {
  z-index: 7;
}

.episode__mountain-1-left {
  bottom: calc(var(--index) * -0.1);
  left: calc(var(--index) * -2);
}

.episode__mountain-1-left img {
  height: calc(var(--index) * 13.5);
  margin-bottom: -30px;
  margin-left: -30px;
}

.episode__mountain-1-right {
  bottom: calc(var(--index) * -0.1);
  left: calc(var(--index) * 27.5);
}

.episode__mountain-1-right img {
  height: calc(var(--index) * 12.88);
  margin-bottom: -30px;
  margin-right: -30px;
}

.episode__mountain-2-left,
.episode__mountain-2-right {
  z-index: 6;
}

.episode__mountain-2-left {
  bottom: calc(var(--index) * -0.1);
  left: calc(var(--index) * -1.2);
}

.episode__mountain-2-left img {
  height: calc(var(--index) * 17.72);
  margin-bottom: -30px;
  margin-left: -30px;
}

.episode__mountain-2-right {
  bottom: calc(var(--index) * 2.5);
  left: calc(var(--index) * 44.3);
}

.episode__mountain-2-right img {
  height: calc(var(--index) * 12.33);
  margin-bottom: -30px;
  margin-right: -30px;
}

.episode__mountain-3-left,
.episode__mountain-3-right {
  z-index: 5;
}

.episode__mountain-3-left {
  bottom: calc(var(--index) * -0.4);
  left: 0;
}

.episode__mountain-3-left img {
  height: calc(var(--index) * 24.73);
  margin-bottom: -30px;
  margin-left: -30px;
}

.episode__mountain-3-right {
  bottom: calc(var(--index) * 1.7);
  left: calc(var(--index) * 42.9);
}

.episode__mountain-3-right img {
  height: calc(var(--index) * 18.81);
  margin-bottom: -30px;
  margin-right: -30px;
}

.episode__mountain-4-left,
.episode__mountain-4-right {
  z-index: 4;
}

.episode__mountain-4-left {
  bottom: calc(var(--index) * 0.1);
  left: calc(var(--index) * -0.4);
}

.episode__mountain-4-left img {
  height: calc(var(--index) * 27.93);
  margin-bottom: -30px;
  margin-left: -30px;
}

.episode__mountain-4-right {
  bottom: calc(var(--index) * 4);
  left: calc(var(--index) * 41.5);
}

.episode__mountain-4-right img {
  height: calc(var(--index) * 19.44);
  margin-bottom: -30px;
  margin-right: -30px;
}

.episode__mountain-5-left,
.episode__mountain-5-right {
  z-index: 3;
}

.episode__mountain-5-left {
  bottom: calc(var(--index) * 4.3);
  left: calc(var(--index) * 11.7);
}

.episode__mountain-5-left img {
  height: calc(var(--index) * 18);
  margin-bottom: -30px;
  margin-left: -30px;
}

.episode__mountain-5-right {
  bottom: calc(var(--index) * 7.62);
  left: calc(var(--index) * 40.6);
}

.episode__mountain-5-right img {
  height: calc(var(--index) * 14.25);
  margin-bottom: -30px;
  margin-right: -30px;
}

.episode__mountain-6-left,
.episode__mountain-6-right {
  z-index: 5;
}

.episode__mountain-6-left {
  bottom: calc(var(--index) * 1.7);
  left: 0;
}

.episode__mountain-6-left img {
  height: calc(var(--index) * 25.2);
  margin-bottom: -30px;
  margin-left: -30px;
}

.episode__mountain-6-right {
  bottom: calc(var(--index) * 1.55);
  left: calc(var(--index) * 41.5);
}

.episode__mountain-6-right img {
  height: calc(var(--index) * 25.16);
  margin-bottom: -30px;
  margin-right: -30px;
}

.episode__mountain-7-left,
.episode__mountain-7-right {
  z-index: 5;
}

.episode__mountain-7-left {
  bottom: calc(var(--index) * 2.5);
  left: calc(var(--index) * 5.5);
}

.episode__mountain-7-left img {
  height: calc(var(--index) * 22.8);
  margin-bottom: -30px;
  margin-left: -30px;
}

.episode__mountain-7-right {
  bottom: calc(var(--index) * 6.3);
  left: calc(var(--index) * 36.5);
}

.episode__mountain-7-right img {
  height: calc(var(--index) * 18.56);
  margin-bottom: -30px;
  margin-right: -30px;
}

.episode__mountain-8-left,
.episode__mountain-8-right {
  z-index: 5;
}

.episode__mountain-8-left {
  bottom: calc(var(--index) * 1.65);
  left: 0;
}

.episode__mountain-8-left img {
  height: calc(var(--index) * 23.61);
  margin-bottom: -30px;
  margin-left: -30px;
}

.episode__mountain-8-right {
  bottom: calc(var(--index) * 2.02);
  left: calc(var(--index) * 42.5);
}

.episode__mountain-8-right img {
  height: calc(var(--index) * 21.92);
  margin-bottom: -30px;
  margin-right: -30px;
}

.episode__mountain-9-left {
  bottom: calc(var(--index) * -0.4);
  left: calc(var(--index) * -0.4);
  z-index: 8;
}

.episode__mountain-9-left img {
  height: calc(var(--index) * 21.8);
  margin-bottom: -30px;
  margin-left: -30px;
}

.episode__cloud-1-left,
.episode__cloud-1-right {
  z-index: 2;
}

.episode__cloud-1-left {
  bottom: calc(var(--index) * 20);
  left: calc(var(--index) * 20);
}

.episode__cloud-1-left img {
  height: calc(var(--index) * 5.9);
  margin-bottom: -30px;
  margin-left: -30px;
}

.episode__cloud-1-right {
  bottom: calc(var(--index) * 17.3);
  left: calc(var(--index) * 40.5);
}

.episode__cloud-1-right img {
  height: calc(var(--index) * 6.6);
  margin-bottom: -30px;
  margin-right: -30px;
}

.episode__cloud-2-left {
  bottom: calc(var(--index) * 13);
  left: calc(var(--index) * 15);
  z-index: 5;
}

.episode__cloud-2-left img {
  height: calc(var(--index) * 6.4);
  margin-bottom: -30px;
  margin-left: -30px;
}

/***** episode error animation*****/
.episode_alien-vehicle{
  bottom: calc(var(--index) * 6.1);
  left: calc(var(--index) * 25.9);
  width: calc(var(--index) * 20);
  z-index: 11;
}
.episode_error{
  bottom: calc(var(--index) * 3.1);
  left: calc(var(--index) * 24.5);
  width: calc(var(--index) * 18);
  z-index: 10;
}
.episode_leaf_home-button{
  bottom: calc(var(--index) * 0);
  left: calc(var(--index) * 27.8);
  width: calc(var(--index) * 10);
  z-index: 12;
  pointer-events:visible;
}

/***** reponsive table *****/
@media (max-width: 1199px) and (orientation: portrait) {
  .episode__light {
    left: calc(var(--index) * -28.4);
  }

  .episode__light-small {
    left: calc(var(--index) * -5.57);
  }

  .episode__light-middle {
    left: calc(var(--index) * -25.41);
  }

  .episode__sun {
    left: calc(var(--index) * 12.6);
  }

  .episode__tree-left {
    left: calc(var(--index) * -13);
  }

  .episode__tree-right {
    left: calc(var(--index) * 23.6);
  }

  .episode__tree-2-right {
    left: calc(var(--index) * 6.6);
  }

  .episode__tree-3-left {
    left: calc(var(--index) * -13.6);
  }

  .episode__tree-3-right {
    left: calc(var(--index) * 26.6);
  }

  .episode__mountain-1-left {
    left: calc(var(--index) * -15);
  }

  .episode__mountain-1-right {
    left: calc(var(--index) * 13.5);
  }

  .episode__mountain-2-left {
    left: calc(var(--index) * -14.2);
  }

  .episode__mountain-2-right {
    left: calc(var(--index) * 31.3);
  }

  .episode__mountain-3-left {
    left: calc(var(--index) * -13);
  }

  .episode__mountain-3-right {
    left: calc(var(--index) * 30.9);
  }

  .episode__mountain-4-left {
    left: calc(var(--index) * -13.4);
  }

  .episode__mountain-4-right {
    left: calc(var(--index) * 29.5);
  }

  .episode__mountain-5-left {
    left: calc(var(--index) * -2.7);
  }

  .episode__mountain-5-right {
    left: calc(var(--index) * 27.6);
  }

  .episode__mountain-6-left {
    left: calc(var(--index) * -13);
  }

  .episode__mountain-6-right {
    left: calc(var(--index) * 28.5);
  }

  .episode__mountain-7-left {
    left: calc(var(--index) * -8.5);
  }

  .episode__mountain-7-right {
    left: calc(var(--index) * 23.5);
  }

  .episode__mountain-8-left {
    left: calc(var(--index) * -13);
  }

  .episode__mountain-8-right {
    left: calc(var(--index) * 28.5);
  }

  .episode__mountain-9-left {
    left: calc(var(--index) * -13.4);
  }

  .episode__cloud-1-left {
    left: calc(var(--index) * 7);
  }

  .episode__cloud-1-right {
    left: calc(var(--index) * 27.5);
  }

  .episode__cloud-2-left {
    left: calc(var(--index) * 2);
  }

  .episode_error{
    left: calc(var(--index) * 6);
  }
  .episode_alien-vehicle{
    left: calc(var(--index) * 8);
  }
   .episode_leaf_home-button{
    left: calc(var(--index) * 12);
  }
}
@media (max-width: 991px) {
  .episode_error{
    left: calc(var(--index) * 14);
  }
  .episode_alien-vehicle{
    left: calc(var(--index) * 15);
  }
   .episode_leaf_home-button{
    left: calc(var(--index) * 18);
  }
}

@media (max-width: 767.98px) {
  .episode,
  .episode__wrapper {
    height: 100svh;
  }
  .episode__rect img {
    height: calc(var(--index) * 5);
  }
}
/***** reponsive phone *****/
@media (max-width: 490px) {
  .episode_error{
    left: calc(var(--index) * 8.3);
    bottom: calc(var(--index) * 6.5);
  }
  .episode_alien-vehicle{
    left: calc(var(--index) * 10);
    bottom: calc(var(--index) * 9.1);
  }
   .episode_leaf_home-button{
    left: calc(var(--index) * 14);
    bottom: calc(var(--index) * 2);
  }
}