body::-webkit-scrollbar, body::-webkit-scrollbar-button { display: none; } 
body {
    background-color: rgb(238, 238, 238);
    color: black;
    /* font-family: Zapfino; */
    font-family: Papyrus;
    letter-spacing: 5px;

    transition: background-color 1s ease, color 1s ease;
}

.center {
  text-align: center;
}

.centerI {
  text-align: center;
  font-style: italic;
}

.container {
    position: relative;
    display: block;
    min-height: 100vh;
    z-index: 1;
    width: 90%;
    margin: 0 auto 0 auto;
    margin-top: 140px;
    /* border: 1px solid black; */
}

.title-image {
  background-image: url("../images/white.jpeg");
  width: 90%;
  height: 450px;
  background-size: contain;
  margin: 0 auto 0 auto;
}

.title-container {
    position: relative;
    width: 100%;
    text-align: center;
}

.title-container h1 {
    font-size: 100px;
}

.prologue-container {
    text-align: center;
    font-size: 25px;
}

.prologue-text1 {
    text-align: left;
    width: 100%;
}

.prologue-text2 {
    text-align: right;
    width: 100%;
}

.prologue-image-container {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin: 0 auto 0 auto;
  }

.prologue-image1 {
    position: relative;
  background-image: url("../images/white.jpeg");
  width: 30%;   
  height: 280px;
  background-size: contain;
  animation: animation1 1100ms infinite alternate linear;
}

@keyframes animation1 {
    0% {top: 0px;}
    100% {top: 100px;}
    /* 100% {top: 0px;} */
}

.prologue-image2 {
    background-image: url("../images/white.jpeg");
    width: 35%;
    height: 350px;
    background-size: contain;
   
  }

  .prologue-image3 {
    background-image: url("../images/white.jpeg");
    width: 35%;
    height: 300px;
    background-size: contain;
 
  }

  .prologue-image4 {
    background-color: white;
    background-image: url("../images/without_background/prologue_image4.png");
    width: 50%;
    height: 300px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .prologue-image5 {
    background-color: white;
    background-image: url("../images/without_background/prologue_image5.png");
    width: 50%;
    height: 300px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    }
  
    .prologue-image6 {
      background-image: url("../images/white.jpeg");
      width: 100%;
      height: 300px;
      background-size: contain;
      margin-top: 7px;
    }


    .darkness-container {
      width: 100%;
      height: 1000px;
    }

    .darkness-container, span {
      width: 60%;
      margin: 0 auto 0 auto;
    }


    .main {
      font-size: 25px;
      margin-top: 120px;
    }

    .story-title {
      text-align: center;
      font-size: 25px;
    }

    .main-image-container {
      display: flex;
      justify-content: center;
      gap: 7px;
    }

    .main-text1 {
      text-align: center;
      width: 100%;
  }

  .main-image1 {
    background-image: url("../images/white.jpeg");
    width: 65%;
    height: 500px;
    background-size: contain;
  }
  
  .main-image2 {
      background-image: url("../images/white.jpeg");
      width: 35%;
      height: 500px;
      background-size: contain;
    }

    .main-text2 {
      text-align: left;
      width: 100%;
  }

  .main-image3 {
    background-image: url("../images/white.jpeg");
    width: 100%;
    height: 300px;
    background-size: contain;
  }

  .main-text3 {
    text-align: right;
    width: 100%;
}

.main-image4 {
  background-color: white;
    background-image: url("../images/without_background/main-image4.png");
    width: 70%;
  height: 180px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


.main-image5 {
  background-image: url("../images/white.jpeg");
  width: 30%;
  height: 350px;
  background-size: contain;
}

.main-image6 {
  background-image: url("../images/white.jpeg");
  width: 60%;
  height: 150px;
  background-size: contain;
  margin-top: -163px;
  margin-left: calc(10% + -6px);
}
  
.main-text4 {
  text-align: center;
  width: 100%;
}

.main-image7 {
  background-image: url("../images/white.jpeg");
  width: 50vw;
  height: 35vw;
  background-size: contain;
}

.main-image8 {
  background-image: url("../images/white.jpeg");
  width: 50vw;
  height: 35vw;
  background-size: contain;
}

.main-image9 {
  background-image: url("../images/white.jpeg");
  width: 100%;
  height: 500px;
  background-size: contain;
  margin-top: 7px;

}

.quote1 {
  text-align: center;
  font-style: italic;
}

.main-text5 {
  text-align: left;
  width: 100%;
}

.main-text6 {
  text-align: left;
  width: 100%;
}

.main-text6 h3 {
  width: 70%;
}

.main-image10 {
  background-image: url("../images/white.jpeg");
  width: 30%;
  height: 300px;
  background-size: contain;
}

.main-text7 {
  text-align: left;
  width: 100%;
}


.main-image11 {
  background-image: url("../images/white.jpeg");
  width: 30%;
  height: 300px;
  background-size: contain;
}

.main-image12 {
  background-image: url("../images/white.jpeg");
  width: 40%;
  height: 300px;
  background-size: contain;
}

.main-image13 {
  background-image: url("../images/white.jpeg");
  width: 30%;
  height: 300px;
  background-size: contain;
}

.main-text8 {
  text-align: right;
  width: 100%;

}

.main-image14 {
  background-image: url("../images/white.jpeg");
  width: 74%;
  height: 100px;
  background-size: contain;
  margin: 0 auto 0 auto;
  z-index: 2;
}

.time-effect {
  position: relative;
  background-image: url("../images/time_effect.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 110vw;
  height: 500px;
  z-index: -7;
  margin-top: -160px;
  /* margin-left: -50px; */
}

.main-text9 {
  text-align: center;
  margin-top: 20px;
}

.outro {
  text-align: center;
  height: 120vw;
}