.frame {
  background-color: #22232b;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100vw;
  height: auto;
}

.div {
  background-color: #22232b;
  overflow: hidden;
  width: 100vw;
  height: 1530vh;
  position: relative;
}

.cover {
  position: absolute;
  width: 100vw;
  height: 810px;
  top: 0;
  left: 0;
  background-color: #f0eae4;
}

.music {
  position: absolute;
  top: 60%;
  left: 48vw;
  object-fit: cover;
}

.music:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease-in-out;
}

.music:active {
  transform: scale(0.9);
  transition: transform 0.1s ease-in-out;
}

.div-2 {
  display: inline-flex;
  align-items: center;
  gap: 10vw;
  position: relative;
  top: 12%;
}

.page-flower {
  position: relative;
  width: 391px;
  height: 563px;
  object-fit: cover;
}

.div-3 {
  display: flex;
  flex-direction: column;
  width: 635px;
  align-items: center;
  position: relative;
}

.sunflower-moon {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 97px;
  object-fit: cover;
}

.text-wrapper {
  position: relative;
  align-self: stretch;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #000000;
  font-size: 2rem;
  text-align: center;
  letter-spacing: 0;
  line-height: 2.25rem;
}

.page-moon {
  position: relative;
  right: -5px;
  width: 362px;
  height: 470px;
  object-fit: cover;
}

.page-1 {
  position: absolute;
  width: 100%;
  height: 810px;
  top: 810px;
  left: 0;
  background-color: #f0eae4;
}

.flower-group {
  position: absolute;
  width: 803px;
  height: 460px;
  top: 350px;
  left: 0;
  object-fit: cover;
}

.sun {
  position: absolute;
  width: 463px;
  height: 451px;
  top: 30%;
  right: 58px;
  object-fit: cover;
}

.sun:hover {
  filter: brightness(1.2);
  transition: filter 0.3s ease-in-out;
}

.text-wrapper-2 {
  position: absolute;
  top: 256px;
  left: 24.0625vw;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #000000;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 36px;
  white-space: nowrap;
}

.in-the-direction-of {
  position: absolute;
  top: 561px;
  left: 50vw;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #000000;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 36px;
  white-space: nowrap;
}

.page-2 {
  position: absolute;
  width: 100%;
  height: 810px;
  top: 1620px;
  left: 0;
  background: linear-gradient(
    180deg,
    rgba(240, 234, 228, 1) 0%,
    rgba(34, 35, 43, 1) 100%
  );
}

.page-3 {
  position: absolute;
  width: 100%;
  height: 810px;
  top: 2430px;
  left: 0;
  background-color: #22232b;
}

.flower {
  position: absolute;
  width: 343px;
  height: 334px;
  top: 342px;
  left: 13.2292vw;
  object-fit: cover;
}

.overlap-group {
  position: absolute;
  width: 379px;
  height: 385px;
  top: 166px;
  right: 7.6042vw;
}

.moon {
  position: absolute;
  width: 280px;
  height: 364px;
  top: 0;
  left: 1.5625vw;
  object-fit: cover;
}

.page-star {
  width: 24px;
  height: 24px;
  top: 209px;
  position: absolute;
  left: 298px;
  object-fit: cover;
  animation: star-flicker 1.5s infinite;
}

.img {
  width: 81px;
  height: 80px;
  top: 49px;
  position: absolute;
  left: 298px;
  object-fit: cover;
  animation: star-flicker 2.3s infinite;
}

.page-star-2 {
  width: 42px;
  height: 42px;
  top: 343px;
  left: 0;
  position: absolute;
  object-fit: cover;
  animation: star-flicker 1.6s infinite;
}

.page-star-3 {
  width: 34px;
  height: 34px;
  top: 210px;
  right: 523px;
  position: absolute;
  object-fit: cover;
  animation: star-flicker 1.8s infinite;
}

.page-star-4 {
  width: 84px;
  height: 84px;
  top: 570px;
  left: 1308px;
  position: absolute;
  object-fit: cover;
  animation: star-flicker 1.9s infinite;
}

.page-star-5 {
  width: 84px;
  height: 84px;
  top: 333px;
  right: 600px;
  position: absolute;
  object-fit: cover;
  animation: star-flicker 2.1s infinite;
}

.p {
  position: absolute;
  top: 155px;
  left: 9.6875vw;
  font-family: "EB Garamond", serif;
  font-weight: 500;
  color: #f0eae4;
  font-size: 32px;
  letter-spacing: -0.35px;
  line-height: 36px;
  white-space: nowrap;
}

.text-wrapper-3 {
  position: absolute;
  top: 616px;
  right: 300px;
  font-family: "EB Garamond", serif;
  font-weight: 500;
  color: #f0eae4;
  font-size: 32px;
  letter-spacing: -0.35px;
  line-height: 36px;
  white-space: nowrap;
}

.page-4 {
  position: absolute;
  width: 100%;
  height: 810px;
  top: 3240px;
  left: 0;
  background-color: #22232b;
}

.the-mysterious-light {
  position: absolute;
  width: 584px;
  top: 160px;
  left: 139px;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 36px;
}

.not-from-what-it-was {
  position: absolute;
  width: 550px;
  bottom: 160px;
  right: 113px;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 36px;
}

.page4-moon {
  position: absolute;
  width: 288px;
  height: 289px;
  top: 318px;
  left: 315px;
  aspect-ratio: 288/289;
  object-fit: cover;
}

.page4-hand {
  position: absolute;
  width: 589px;
  height: 383px;
  top: 154px;
  right: 113px;
  aspect-ratio: 288/289;
  object-fit: cover;
}
.page3-star1-1 {
  position: absolute;
  width: 20px;
  height: 19px;
  flex-shrink: 0;
  aspect-ratio: 20/19;
  top: 285px;
  left: 651px;
  object-fit: cover;
  animation: star-flicker 1.8s infinite;
}
.page3-star1-2 {
  position: absolute;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  top: 537px;
  left: 671px;
  object-fit: cover;
  animation: star-flicker 1.1s infinite;
}
.page3-star2-1 {
  position: absolute;
  width: 33px;
  height: 34px;
  flex-shrink: 0;
  aspect-ratio: 33/34;
  top: 632px;
  left: 478px;
  object-fit: cover;
  animation: star-flicker 1.2s infinite;
}
.page3-star2-2 {
  position: absolute;
  width: 34px;
  height: 33px;
  flex-shrink: 0;
  aspect-ratio: 34/33;
  top: 547px;
  left: 230px;
  object-fit: cover;
  animation: star-flicker 1.5s infinite;
}
.page3-star2-3 {
  position: absolute;
  width: 33px;
  height: 34px;
  flex-shrink: 0;
  aspect-ratio: 33/34;
  top: 371px;
  left: 213px;
  object-fit: cover;
  animation: star-flicker 2s infinite;
}

.page-5 {
  position: absolute;
  width: 100%;
  height: 810px;
  top: 4050px;
  left: 0;
  background-color: #22232b;
}

.page5-hand2 {
  position: absolute;
  width: 1440px;
  height: 383px;
  flex-shrink: 0;
  aspect-ratio: 1440/383;
  top: 200px;
  left: 9vw;
  aspect-ratio: 288/289;
  object-fit: cover;
}

.although-the-moon {
  position: absolute;
  width: 580px;
  top: 81px;
  left: 35%;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 36px;
}

.danced-through-the-shadows {
  position: absolute;
  width: 561px;
  top: 674px;
  left: 35%;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 36px;
}

.page-6 {
  position: absolute;
  width: 100%;
  height: 810px;
  top: 4860px;
  left: 0;
  background-color: #22232b;
}

.overlap-7 {
  position: relative;
  width: 941px;
  height: 566px;
  top: 189px;
  left: 16.1979vw;
}

.cigg {
  position: absolute;
  width: 306px;
  height: 211px;
  top: 355px;
  left: 0;
  object-fit: cover;
}

.smoke {
  position: absolute;
  width: 635px;
  height: 355px;
  top: 0;
  left: 306px;
  object-fit: cover;
  animation: smoke-drift 4s infinite;
  animation-play-state: paused;
}

.smoke:hover {
  scale: 1.1;
  transition: scale 0.3s ease-in-out;
}

.smoke:active {
  animation-play-state: running;
}
.the-moon-was-in-the {
  position: absolute;
  width: 561px;
  top: 289px;
  left: 12.5521vw;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0;
  line-height: 36px;
}

.page-7 {
  position: absolute;
  width: 100%;
  height: 810px;
  top: 5670px;
  left: 0;
  background-color: #22232b;
}

.text-wrapper-6 {
  position: absolute;
  width: 561px;
  top: 66px;
  left: 3.5417vw;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 36px;
}

.danced-to-its-own {
  position: absolute;
  width: 561px;
  top: 633px;
  left: 42.6563vw;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  text-align: right;
  letter-spacing: 0;
  line-height: 36px;
}

.flower-2 {
  position: absolute;
  width: 344px;
  height: 442px;
  top: 184px;
  left: 28.5417vw;
  object-fit: cover;
}

.page-8 {
  position: absolute;
  width: 100%;
  height: 810px;
  top: 6480px;
  left: 0;
  background-color: #22232b;
}

.page-8-div {
  position: relative;
  width: 362px;
  height: 470px;
  top: 209px;
  left: 40%;
}

.page8-moon {
  position: absolute;
  width: 362px;
  height: 470px;
  flex-shrink: 0;
  aspect-ratio: 181/235;
  top: 0;
  left: 0;
  object-fit: cover;
}

.but-the-moon {
  position: absolute;
  width: 146px;
  top: 33%;
  left: 55%;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #23242c;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 36px;
}

.page8-clouds {
  position: absolute;
  width: 1268px;
  height: 573px;
  flex-shrink: 0;
  aspect-ratio: 1268/573;
  top: 147px;
  left: 15%;
  object-fit: cover;
  opacity: 0;
}

.page8-clouds:hover {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.a-slow-cautious-steady-unsure-dance {
  position: absolute;
  width: 561px;
  top: 246px;
  left: 70%;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #23242c;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 36px;
}

.page-9 {
  position: absolute;
  width: 100%;
  height: 810px;
  top: 7290px;
  left: 0;
  background-color: #22232b;
}

.page9-flower {
  position: absolute;
  width: 619px;
  height: 620px;
  flex-shrink: 0;
  aspect-ratio: 619/620;
  top: 130px;
  left: 0;
  object-fit: cover;
}

.page9-light {
  position: absolute;
  width: 334px;
  height: 616px;
  flex-shrink: 0;
  aspect-ratio: 167/308;
  top: 130px;
  left: 40%;
  object-fit: cover;
  animation: light-drift 2s infinite;
  animation-play-state: paused;
}

.page9-light:hover {
  animation-play-state: running;
}

.page9-moon {
  position: absolute;
  width: 419px;
  height: 471px;
  flex-shrink: 0;
  aspect-ratio: 419/471;
  top: 204px;
  right: 0;
  object-fit: cover;
}

.the-sunflower-thought {
  position: absolute;
  width: 225px;
  top: 480px;
  left: 30%;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  text-align: left;
  letter-spacing: 0;
  line-height: 36px;
}

.whenever-it-could {
  position: absolute;
  width: 601px;
  top: 351px;
  left: 75%;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  text-align: left;
  letter-spacing: 0;
  line-height: 36px;
}

.page-10 {
  position: absolute;
  width: 100%;
  height: 810px;
  top: 8100px;
  left: 0;
}

.to-dance-as-the-moon {
  position: absolute;
  width: 601px;
  bottom: 33px;
  left: 33%;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0;
  line-height: 36px;
}

.page10-hand {
  position: absolute;
  width: 1271px;
  height: 516px;
  flex-shrink: 0;
  aspect-ratio: 1271/516;
  top: 147px;
  left: 15%;
  object-fit: cover;
}

.page-11 {
  position: absolute;
  width: 100%;
  height: 810px;
  top: 8910px;
  left: 0;
  background-color: #22232b;
}

.page11-flower {
  position: absolute;
  width: 875px;
  height: 570px;
  flex-shrink: 0;
  aspect-ratio: 175/114;
  top: 224px;
  left: 0;
  object-fit: cover;
}

.but-the-sunflower {
  position: absolute;
  width: 601px;
  top: 134px;
  left: 21.8229vw;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0;
  line-height: 36px;
}

.text-wrapper-11 {
  position: absolute;
  width: 601px;
  top: 404px;
  left: 32.9688vw;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0;
  line-height: 36px;
}

.text-wrapper-12 {
  position: absolute;
  width: 601px;
  top: 697px;
  left: 43.6979vw;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0;
  line-height: 36px;
}

.page-12 {
  position: absolute;
  width: 100%;
  height: 810px;
  top: 9720px;
  left: 0;
  background-color: #22232b;
}

.page12-flower {
  position: absolute;
  width: 1244px;
  height: 810px;
  flex-shrink: 0;
  aspect-ratio: 622/405;
  top: 0;
  left: 14%;
  object-fit: cover;
}

.the-sunflower-could {
  position: absolute;
  width: 601px;
  top: 332px;
  left: 33%;
  text-align: center;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 36px;
}

.page-13 {
  position: absolute;
  width: 100%;
  height: 810px;
  top: 10530px;
  left: 0;
  background-color: #22232b;
}

.overlap-10 {
  position: relative;
  width: 1218px;
  height: 384px;
  top: 250px;
  left: 9vw;
}

.although-the {
  position: absolute;
  width: 601px;
  top: 158px;
  left: 617px;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0;
  line-height: 36px;
}

.overlap-11 {
  position: absolute;
  width: 664px;
  height: 384px;
  top: 0;
  left: 0;
}

.fallen-pedals {
  position: absolute;
  width: 414px;
  height: 84px;
  top: 293px;
  left: 250px;
  object-fit: cover;
}

.flower-4 {
  position: absolute;
  width: 590px;
  height: 317px;
  top: 0;
  left: 0;
  object-fit: cover;
}

.page-heart {
  position: absolute;
  width: 75px;
  height: 50px;
  top: 334px;
  left: 457px;
  object-fit: cover;
  opacity: 0;
}

.page-heart-2 {
  position: absolute;
  width: 61px;
  height: 33px;
  top: 293px;
  left: 513px;
  object-fit: cover;
  opacity: 0;
}

.page-heart-3 {
  position: absolute;
  width: 87px;
  height: 35px;
  top: 341px;
  left: 275px;
  object-fit: cover;
  opacity: 0;
}

.page-heart-4 {
  position: absolute;
  width: 118px;
  height: 39px;
  top: 315px;
  left: 546px;
  object-fit: cover;
  opacity: 0;
}

.page-heart:hover {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.page-heart-2:hover {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.page-heart-3:hover {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.page-heart-4:hover {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.page-14 {
  position: absolute;
  width: 100%;
  height: 810px;
  top: 11340px;
  left: 0;
  background-color: #22232b;
}

.the-sunflower-had {
  position: absolute;
  width: 601px;
  top: 50%;
  left: 35%;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0;
  line-height: 36px;
}

.page-hand-3 {
  position: absolute;
  width: 715px;
  height: 524px;
  flex-shrink: 0;
  aspect-ratio: 715/524;
  top: 199px;
  left: 0;
  object-fit: cover;
}

.page14-hand2-1 {
  position: absolute;
  width: 109px;
  height: 121px;
  flex-shrink: 0;
  aspect-ratio: 109/121;
  right: 0;
  bottom: 110px;
  opacity: 1;
}

.page14-hand2-1:hover {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.page14-hand2-2 {
  position: absolute;
  width: 431px;
  height: 350px;
  flex-shrink: 0;
  aspect-ratio: 431/350;
  right: 82px;
  bottom: 87px;
  opacity: 1;
}

.page14-hand2-2:hover {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.page14-hand2-3 {
  position: absolute;
  width: 112px;
  height: 74px;
  flex-shrink: 0;
  aspect-ratio: 56/37;
  right: 446px;
  bottom: 289px;
  opacity: 1;
}

.page14-hand2-3:hover {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.page14-hand2-4 {
  position: absolute;
  width: 76px;
  height: 63px;
  flex-shrink: 0;
  aspect-ratio: 76/63;
  right: 378px;
  bottom: 79px;
  opacity: 1;
}

.page14-hand2-4:hover {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.page-15 {
  position: absolute;
  width: 100%;
  height: 810px;
  top: 12150px;
  left: 0;
  background-color: #22232b;
}

.the-moon-song {
  position: absolute;
  width: 601px;
  top: 75%;
  left: 33%;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0;
  line-height: 36px;
}

.page15-tear1 {
  position: absolute;
  top: 50%;
  left: 20%;
  object-fit: cover;
}

#page15-note1-1 {
  position: absolute;
  top: 48%;
  left: 17%;
  object-fit: cover;
}

.page15-tear2 {
  position: absolute;
  top: 30%;
  left: 50%;
  object-fit: cover;
}

#page15-note1-2 {
  position: absolute;
  top: 28%;
  left: 47%;
  object-fit: cover;
}

.page15-tear3 {
  position: absolute;
  top: 40%;
  left: 60%;
  object-fit: cover;
}

#page15-note2-1 {
  position: absolute;
  top: 38%;
  left: 57%;
  object-fit: cover;
}

.page15-tear4 {
  position: absolute;
  top: 20%;
  left: 80%;
  object-fit: cover;
}

#page15-note2-2 {
  position: absolute;
  top: 18%;
  left: 77%;
  object-fit: cover;
}

.page15-tear5 {
  position: absolute;
  top: 10%;
  left: 85%;
}

#page15-note3-1 {
  position: absolute;
  top: 8%;
  left: 82%;
  object-fit: cover;
}

.page15-tear6 {
  position: absolute;
  top: 60%;
  left: 40%;
  object-fit: cover;
}

#page15-note3-2 {
  position: absolute;
  top: 58%;
  left: 37%;
  object-fit: cover;
}

.page15-tear7 {
  position: absolute;
  top: 70%;
  left: 70%;
  object-fit: cover;
}

#page15-note4-1 {
  position: absolute;
  top: 68%;
  left: 67%;
  object-fit: cover;
}

.page15-tear8 {
  position: absolute;
  top: 80%;
  left: 90%;
  object-fit: cover;
}

#page15-note4-2 {
  position: absolute;
  top: 78%;
  left: 87%;
  object-fit: cover;
}

.page15-tear9 {
  position: absolute;
  top: 30%;
  left: 5%;
  object-fit: cover;
}

#page15-note5-1 {
  position: absolute;
  top: 28%;
  left: 2%;
  object-fit: cover;
}

.page15-tear10 {
  position: absolute;
  top: 80%;
  left: 15%;
  object-fit: cover;
}

#page15-note5-2 {
  position: absolute;
  top: 78%;
  left: 12%;
  object-fit: cover;
}

.page15-tear11 {
  position: absolute;
  top: 50%;
  left: 90%;
  object-fit: cover;
}

#page15-note5-3 {
  position: absolute;
  top: 48%;
  left: 87%;
  object-fit: cover;
}

.page15-tear12 {
  position: absolute;
  top: 20%;
  left: 30%;
  object-fit: cover;
}

#page15-note5-4 {
  position: absolute;
  top: 18%;
  left: 27%;
  object-fit: cover;
}

.note-hover:hover {
  opacity: 0;
}

.page-16 {
  position: absolute;
  width: 100%;
  height: 810px;
  top: 12960px;
  left: 2px;
  background-color: #22232b;
}

.text-wrapper-13 {
  position: absolute;
  width: 755px;
  top: 262px;
  left: 28%;
  text-align: center;
  white-space: nowrap;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 36px;
}

.text-wrapper-14 {
  position: absolute;
  width: 841px;
  top: 755px;
  left: 299px;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  color: #f0eae4;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0;
  line-height: 36px;
  white-space: nowrap;
}

.overlap-14 {
  position: absolute;
  width: 1158px;
  height: 174px;
  top: 572px;
  left: 20%;
}

.page-fallen-pedals {
  position: absolute;
  width: 1068px;
  height: 174px;
  top: 0;
  left: 0;
  object-fit: cover;
}

.page-blood {
  position: absolute;
  width: 248px;
  height: 92px;
  top: 57px;
  left: 16px;
  object-fit: cover;
  opacity: 0;
}

.page-blood:hover {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.page-blood-2 {
  position: absolute;
  width: 364px;
  height: 78px;
  top: 57px;
  left: 794px;
  object-fit: cover;
  opacity: 0;
}

.page-blood-2:hover {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.page-blood-3 {
  position: absolute;
  width: 259px;
  height: 69px;
  top: 68px;
  left: 370px;
  object-fit: cover;
  opacity: 0;
}

.page-blood-3:hover {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.blood-drop {
  position: absolute;
  width: 36px;
  height: 60px;
  top: 375px;
  left: 50vw;
  object-fit: cover;
}

.footer {
  position: absolute;
  width: 100%;
  height: 810px;
  top: 13770px;
  left: 0;
  background-color: #22232b;
}

@keyframes star-flicker {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.8);
    opacity: 0.5;
  }
}
@keyframes smoke-drift {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}
@keyframes light-drift {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}