body {
  margin:0;
  background: url("Bg.PNG") center/cover no-repeat;
  background-attachment: fixed;
  background-color: rgb(31, 46, 46);
  background-blend-mode: overlay;
}

/*Title Oage DONE*/
#Title_Page{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
#Unravel span{
  color: rgb(179, 168, 132);
  font-family: "Cabin Sketch", sans-serif;
  font-weight: 700;
  font-style:normal;
  font-size: 15vw;
  letter-spacing: 20px;
  display: inline-block;
  animation: float 3s ease-in-out infinite alternate;
}
#Unravel span.U{
  display: inline-block;
  transform: translateY(-130px);
  animation-duration: 2.6s; animation-delay: -0.4s;
}
#Unravel span.N{
  display: inline-block;
  transform: translate(-20px, -80px); /*translate(x,y) moves the element by x pixels horizontally and y pixels vertically*/
  animation-duration: 3.4s; animation-delay: -1.3s;
}
#Unravel span.R{
  display: inline-block;
  transform: translate(-10px, -40px); 
  animation-duration: 2.4s; animation-delay: -2.0s;
}
#Unravel span.A{
  animation-duration: 3s; animation-delay: -0.8s
}
#Unravel span.V{
  display: inline-block;
  transform: translate(10px, 40px); 
  animation-duration: 2.6s; animation-delay: -1.4s;;
}
#Unravel span.E{
  display: inline-block;
  transform: translate(10px, 40px);
  animation-duration: 3.9s; animation-delay: -0.3s;
}
#Unravel span.L{
  display: inline-block;
  transform: translate(10px, 40px); 
  animation-duration: 3.0s; animation-delay: -1.7s;
}
@keyframes float {
  from { translate: 0 -10px; }
  to   { translate: 0 10px; }
}

/*Page 1 DONE*/
#Page1 {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
#poem{
  position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 55%;
    color: #ccc;
    font-family: "Shadows Into Light Two", cursive;
    font-size: 50px;
    line-height: 1;
}
#poem span{
  font-family: "Permanent Marker", cursive;
  display: inline-block;      /* transform has no effect on inline elements */
  color: #880a0a;
  font-size: 100px;
  animation: WEIGHT 0.3s ease-in forwards;
  animation-play-state: paused;
}
#poem span:hover{
  animation-play-state: running;
}
@keyframes WEIGHT{
  0%{
    transform: translateY(0em);
  }
  100%{
    transform: translateY(0.7em);
  }
}
#poem #b3{
  margin-left: 1em;
}
#poem #b4{
  margin-left: 2em;
}
#poem #b5{
  margin-left: 2em;
}
/* the box that pins the girl to the right side */
#girl {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
#girl img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}
#girl img#frame2{
  animation: frame2 0.7s steps(1, end) infinite; /*end in steps(1, end) to make it jump to the last frame and stay there*/
}
@keyframes frame2 {
  0%, 49.99% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
/*0% to 49.99% opacity is 1, then from 50% onwards opacity is 0, creating a flicker effect. The animation is set to repeat infinitely, so the flicker will continue indefinitely.*/


/*Page 2*/
#Page2 {
  position: relative;
  width: 100%;
  height: 120vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
#Page2 p{
  text-align: center;
  color: rgb(204, 204, 204);
  font-size: 7vw; /*vw means viewport width*/
  z-index: 1;
  font-family: "Shadows Into Light Two", cursive;
}
#string2{
  position:absolute;
  width: 100%;
  height: 100vh;
  z-index: 0;
}


/*Page 3*/
#Page3{
  position: relative;
  width: 100%;
  height: 170vh;
}
#stage{
  position: relative;
  height: 85%;
}
#stage2{
  position: relative;
  height: 62%;
  font-size: 70px;
  color: rgb(204, 204, 204);
  margin:auto;
  font-family: "Shadows Into Light Two", cursive;
}
#dreams{
  position: sticky;
  top: 78%;
  left: 70%;
}
#expectations{
  position: sticky;
  top: 78%;
  left: 45%;
}
#failures{
  position: sticky;
  top: 78%;
  left: 1%;
  font-size: 80px;
}
#heart{
  position: sticky;
  top: 8%;   /* vertical centering only */
  display: block;
  margin: 0 auto; /* horizontal centering */
  z-index:1;
}
#heart:hover {
  animation: heartbeat 1s ease-in-out infinite;
  filter: drop-shadow(0 0 40px rgba(38, 194, 190, 0.45));
}
#bottom{
  position:absolute;
  bottom: -2%;
  width: 100%;
  height: 130%;
  left: 49%;
  transform: translateX(-50%);
  z-index:0;
}
@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform:  scale(1.12); }
  28% { transform: scale(1); }
  42% { transform:  scale(1.09); }
  70%,100% { transform:  scale(1); }
  }


/*Page 4*/
#Page4{
  position: relative;
  width: 100%;
  height: 130vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#centergirl{
  position: absolute;
  bottom: 0;
  width: 75%;
  height: 100vh;
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  z-index:0;
}
#centergirl img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index:0;
}
#centergirl img#girl_center2{
   animation: girl_center2 0.7s steps(1,end) infinite;
}
@keyframes girl_center2{
  0%, 49.99%{
    opacity:1;
  }
  50%, 100%{
    opacity:0;
  }
}
#centergirl img#string4{
  z-index:-1;
}
#centergirl img#string3{
  animation: string3 0.7s steps(1,end) infinite;
  z-index:-1;
}
@keyframes string3{
  0%, 49.99%{
    opacity:1;
  }
  50%, 100%{
    opacity:0;
  }
}
.front-text{
  color: rgb(204, 204, 204);
  position: absolute;
  z-index:2;
  font-family: "Shadows Into Light Two", cursive;
  font-weight: 800;
  letter-spacing: 3px;
}
.f1{
  position:absolute;
  left: 47%;
  top: 33%;
  font-size: 42px;
}
.f2{
  position: absolute;
  left: 40%;
  top: 77%;
  font-size: 40px;
  width: 500px;
  text-align: center;
}
:root { /*root is used to define global CSS variables that can be accessed throughout the entire document*/
  --bg: #0f1117;
  --ink: rgb(204, 204, 204);
  --reveal: #880a0a;
}
.word {
  position: absolute;
  display: inline-grid; /* stacks both layers in one cell */
  text-decoration: none;
  font-size: 35px;
  cursor: pointer;
  animation: drift var(--dur, 14s) ease-in-out infinite alternate; /*var(--dur, 14s) means if --dur is not defined, it will default to 14s*/
  animation-delay: var(--delay, 0s);
  font-family: "Shadows Into Light Two", cursive;
}
.word span{
  grid-area: 1/1;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.word .from {
  color: var(--ink);
  opacity: 1;
}
.word .to {
  color: var(--reveal);
  opacity: 0;
}
.word:hover .from,
.word:focus-visible .from {
  opacity: 0;
  transform: translateY(-6px);
}
.word:hover .to,
.word:focus-visible .to {
  opacity: 1;
  transform: translateY(0);
}
.word .to {
  transform: translateY(6px);
}
.word:focus-visible {
  outline: 2px solid var(--reveal);
  outline-offset: 8px;
  border-radius: 4px;
}
.w1{
  top: 60%;
  left: 17%;
  --dur: 7s;
  --delay: -1s;
}
.w2{
  top: 35%;
  left: 25%;
  --dur: 11s;
  --delay: 0s;
}
.w3{
  top: 30%;
  left: 65%;
  --dur: 9s;
  --delay: 0s;
}
.w4{
  top: 58%;
  left: 66%;
  --dur: 10s;
  --delay: -3s;
}
.w5{
  top: 23%;
  left: 41%;
  --dur: 6s;
  --delay: -2s;
}
@keyframes drift {
  0% {
  transform: translate(0, 0);
  }
  50% {
  transform: translate(0px, -26px);
  }
  100% {
  transform: translate(0px, 22px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .word {
  animation: none;
  }
}


/*Page 5*/
#Page5{
  position: relative; 
  width: 100%; 
  height: 900vh;
  overflow:clip;
}
.page5-sticky{
  position:sticky;
  top:0;
  height: 100vh;
}
#walking{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 2;
  mask-image: linear-gradient(to top, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 80%, transparent 100%);
  will-change: transform;
}
#road{
 position: absolute;
 top:0;
 width: 150%; 
 height: 100vh; 
 z-index: 0; 
}
#page5-text{
  position: absolute;
  top: 45%;
  left:50%;
  z-index:1;
  white-space: nowrap;
  transform: translate(-50%,-50%);
  will-change: transform;
}
#page5-text span{
  font-family: "Shadows Into Light Two", cursive; /*change later*/
  color: rgb(204, 204, 204);
  letter-spacing: 20px;
  font-size: 90px;
}
#page5-text span#slower{
  letter-spacing: 50px;
}
#page5-text2{
  position: absolute;
  top: 84%;
  left:50%;
  z-index:1;
  white-space: nowrap;
  transform: translate(-50%,-50%);
  will-change: transform;
}
#page5-text2 span{
  font-family: "Shadows Into Light Two", cursive; /*change later*/
  color: rgb(0, 0, 0);
  letter-spacing: 10px;
  font-size: 150px;
}
#page5-text3{
  position: absolute;
  top: 30%;
  left:50%;
  z-index:1;
  white-space: normal;
  transform: translate(-50%,-50%);
  will-change: transform;
}
#page5-text3 span{
  font-family: "Shadows Into Light Two", cursive; /*change later*/
  color: white;
  letter-spacing: 10px;
  font-size: 80px;
  background-color: rgba(0, 0, 0, 0);
  border: 8px;
  max-width: 200px;
}
#page5-text4{
  position:absolute;
  top: 30%;
  left:50%;
  z-index:1;
  white-space: nowrap;
  transform: translate(-50%,-50%);
  will-change: transform;
}
#page5-text4 span{
  font-family: "Shadows Into Light Two", cursive; /*change later*/
  color: white;
  letter-spacing: 10px;
  font-size: 60px;
}
#hanging{
  position:absolute;
  width: 140%;
  height: 140vh;
  top: 44%;
  z-index: 0;
}


/*Page 6*/
#Page6{
  position: relative; 
  width: 100%;
  height: 130vh;
  z-index: -1;
  overflow-x: hidden;
}
#Page6 div{
  position: absolute;
  font-family: "Shadows Into Light Two", cursive; /*change later*/
  color: white;
  letter-spacing: 10px;
  font-size: 60px;
  width: 800px;
  text-align: center;
}
#hanging2{
  position: absolute;
    top: -43%;
    left: 53%;
    transform: translateX(-50%);
    width: 140%;
    height: 140vh;
}
#bru1{
  top:4%;
  border: 4px;
  left:62%;
}
#Page6 div#bru2{
  top:66%;
  left: 53%;
  transform: translate(-50%);
}


/*Page 7*/
#Page7{
  position:relative;
  width:100%;
  height:250vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
#Page7 img{
  position: absolute;
  top: 0%;
  left: 0;
  width: 100vw;
  height: 250vh;
  object-fit: cover;
  z-index: 0;
  mask-image: linear-gradient(to top, #000 20%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 20%, transparent 100%);
}
#overlay{
  position: absolute;
  inset: 0;
  background: rgba(216, 195, 137, 0.808);
  z-index: 1;
  mask-image: linear-gradient(to top, #000 20%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 20%, transparent 100%);
}
#Page7 #word1{
  text-align:center;
  position:absolute;
  color: rgb(105, 100, 82);
  top: 40%;
  font-size: 70px;
  margin: 30px;
  z-index:2;
  font-family: "Shadows Into Light Two", cursive;
}
#Page7 #word2{
  position:absolute;
  color: #746846;
  font-size: 70px;
  top:65%;
  left:0%;
  margin: 30px;
  z-index:2;
  font-family: "Shadows Into Light Two", cursive;
}
#Page7 #word3{
  position:absolute;
  color: #4a3b12;
  font-size: 70px;
  top:80%;
  left:60%;
  margin: 30px;
  z-index:2;
  font-family: "Shadows Into Light Two", cursive;
}


/*Page 8*/
#Page8{
  position:relative;
  width:100%;
  height:100vh;
  overflow: hidden;
}
#Page8 img#yellowbg2{
  position: absolute;
  top: 0%;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
}
.overlay2{
  position: absolute;
  inset: 0;
  background: rgba(216, 195, 137, 0.808);
  opacity: 1;
  z-index: 1;
}
#hands img{
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index:2;
 /* or contain if you prefer */
}
#holding{
    display: none;
}
#reaching{
    cursor: pointer;
}
#word4{
  position:absolute;
  font-size: 40px;
  color:#4a3b12;
  left:60%;
  top:20%;
  font-family: "Shadows Into Light Two", cursive;
  z-index: 3;
}
#word5{
  position:absolute;
  font-size: 40px;
  color:#4a3b12;
  left:43%;
  top:52%;
  font-family: "Shadows Into Light Two", cursive;
  z-index: 1;
}
#word6{
  position:absolute;
  font-size: 40px;
  color:#4a3b12;
  left:10%;
  top:80%;
  font-family: "Shadows Into Light Two", cursive;
  z-index: 3;
}


/*Page 9*/
#Page9{
  position:relative;
  width:100%;
  height:250vh;
  overflow: hidden;
}
#Page9 img#yellowbg2{
  position: absolute;
  top: 0%;
  left: 0;
  width: 100vw;
  height: 250vh;
  object-fit: cover;
  z-index: 0;
}
#Page9 span{
  position: absolute;
  z-index: 2;
}
#word7{
  font-family: "Shadows Into Light Two", cursive;
  position:absolute;
  top: 10%;
  left: 18%;
  transform: rotate(-3deg);
  font-size: 50px;
  color:#4a3b12;
}
#word8{
  font-family: "Shadows Into Light Two", cursive;
  position:absolute;
  top: 32%;
  left: auto;
  right: 15%;
  transform: translate(-50%) rotate(2deg);
  font-size: 50px;
  color:#4a3b12;
}
#word9{
  font-family: "Shadows Into Light Two", cursive;
  position:absolute;
  top: 55%;
  left: 25%;
  transform: translate(-50%) rotate(-1.5deg);
  font-size: 50px;
  color:#4a3b12;
}
#word10{
  font-family: "Shadows Into Light Two", cursive;
  position:absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%);
  font-size: 50px;
  color:#4a3b12;
}