@font-face {
  font-family: "JosefinSansRegular";
  src: url("fonts/JosefinSans-Regular.ttf")  format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "JosefinSansLight";
  src: url("fonts/JosefinSans-Light.ttf")  format("truetype");
  font-weight: normal;
  font-style: normal;
}
body {
  margin: 0;
  padding: 0;
  background-repeat: repeat;
  background-image: url("images/index/paper.webp");
  background-size: 50%;
  font-family: "JosefinSansLight";
  white-space: nowrap;
  cursor: url("images/mouse.png") 12 13, auto;
  font-size: 0;
}
a {
  color: #000;
  text-decoration: none;
}
a:hover {
  color: #000;
  text-decoration: none;
}
body > .container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-behavior: smooth;
}
.story {
  width: 1502vh;
  height: 100vh;
  background-image: url("images/index/river.webp");
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: auto 22vh;
  overflow: hidden;
}
.title {
  position: absolute;
  height: 10vh;
  left: 90vh;
  top: 6vh;
}
.description {
  position: absolute;
  font-size: 4.35vh;
  top: 17vh;
  left: 90vh;
}
.girl {
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}
.wind {
  position: relative;
  width: 1502vh;
  height: 100vh;
  top: 0;
  left: 0;
}
.sb {
  position: absolute;
  z-index: -1;
  height: 5vh;
  animation: sail 20s linear infinite;
}
.sbOffset1 {
  height: 6vh;
  animation-name: otherSail;
  animation-duration: 24s;
}
.sbOffset2 {
  height: 7vh;
  animation-duration: 28s;
}
.sbOffset3 {
  height: 7vh;
  animation-name: otherSail;
  animation-duration: 32s;
}
.sbOffset4 {
  height: 6vh;
  animation-duration: 36s;
}
@keyframes sail {
  0% {
    opacity: 0;
    transform: translatex(0) translatey(1vh);
  }
  12.5% {
    opacity: 0.5;
    transform: translatex(5vh) translatey(0);
  }
  25% {
    transform: translatex(10vh) translatey(-1vh);
  }
  50% {
    transform: translatex(20vh) translatey(1vh);
  }
  75% {
    transform: translatex(30vh) translatey(-1vh);
  }
  87.5% {
    opacity: 0.5;
    transform: translatex(35vh) translatey(0);
  }
  100% {
    opacity: 0;
    transform: translatex(40vh) translatey(1vh);
  }
}
@keyframes otherSail {
  0% {
    opacity: 0;
    transform: translatex(0) translatey(-1vh);
  }
  12.5% {
    opacity: 0.5;
    transform: translatex(5vh) translatey(0);
  }
  25% {
    transform: translatex(10vh) translatey(1vh);
  }
  50% {
    transform: translatex(20vh) translatey(-1vh);
  }
  75% {
    transform: translatex(30vh) translatey(1vh);
  }
  87.5% {
    opacity: 0.5;
    transform: translatex(35vh) translatey(0);
  }
  100% {
    opacity: 0;
    transform: translatex(40vh) translatey(-1vh);
  }
}
.hidden {
  opacity: 0;
  pointer-events: none;
}
.bubble {
  position: absolute;
  cursor: url("images/mouse_over.png") 12 13, pointer;
}
.bubble .container {
  position: relative;
}
.bubble .hover {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  top: 0;
  left: 0;
  transition: opacity 0.25s ease-in-out;
}
.bubble:hover .hover {
  opacity: 1;
}
.bubble .image {
  height: 38.2vh;
}
.bigger .image {
  height: 42vh;
}
.big .image {
  height: 47vh;
}
@keyframes float {
  0% {
    transform: translatex(0) translatey(2vh);
  }
  25% {
    transform: translatex(2vh) translatey(0);
  }
  50% {
    transform: translatex(0) translatey(-2vh);
  }
  75% {
    transform: translatex(-2vh) translatey(0);
  }
  100% {
    transform: translatex(0) translatey(2vh);
  }
}
@keyframes smallFloat {
  0% {
    transform: translatex(0) translatey(1vh);
  }
  25% {
    transform: translatex(1vh) translatey(0);
  }
  50% {
    transform: translatex(0) translatey(-1vh);
  }
  75% {
    transform: translatex(-1vh) translatey(0);
  }
  100% {
    transform: translatex(0) translatey(1vh);
  }
}
.floater {
  will-change: transform;
  transform-origin: 55% 50%;
  animation: float 20s linear infinite;
}
.smallFloater {
  transform-origin: 55% 50%;
  animation: smallFloat 20s linear infinite;
}
.offset1 {
  animation-direction: reverse;
  animation-duration: 24s;
}
.offset2 {
  animation-duration: 22s;
}
.offset3 {
  animation-direction: reverse;
  animation-duration: 28s;
}
.button .text {
  font-family: "JosefinSansRegular";
  font-size: 1.5vh;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  pointer-events: none;
  margin-left: 10px;
}
.button:hover .text {
  opacity: 1;
}
.help {
  left: 150vh;
  top: 58vh;
}
.help .image {
  height: 12vh;
}
.help .text {
  margin-top: 1vh;
  margin-left: 5vh;
}
.about {
  left: 167vh;
  top: 58vh;
}
.about .image {
  height: 13vh;
}
.about .text {
  margin-left: 4.5vh;
}
.bubble1 {
  left: 99.86vh;
  top: 24.9vh;
}
.bubble1 .image {
  height: 29vh;
}
.bubble1 .startHere {
  position: absolute;
  top: 28vh;
  left: 22vh;
  font-family: "JosefinSansRegular";
  font-size: 1.5vh;
  pointer-events: none;
}
.bubble1 .startHere img {
  height: 10vh;
}
.bubble1 .startHere div {
  position: relative;
  top: 1vh;
  left: -2vh;
}
.bubble1_small1 {
  position: absolute;
  left: 21vh;
  top: 21vh;
}
.bubble1_small1 .image {
  height: 4vh;
}
.bubble1_small2 {
  position: absolute;
  left: 30vh;
  top: 21vh;
}
.bubble1_small2 .image {
  height: 5vh;
}
.bubble1_small3 {
  position: absolute;
  left: 6vh;
  top: 6vh;
}
.bubble1_small3 .image {
  height: 6vh;
}
.bubble1_small4 {
  position: absolute;
  left: 33vh;
  top: 27vh;
}
.bubble1_small4 .image {
  height: 9vh;
}
.bubble2 {
  left: 169vh;
  top: 13vh;
}
.bubble3 {
  left: 219vh;
  top: 28vh;
}
.bubble4 {
  left: 274vh;
  top: 10vh;
}
.bubble5 {
  left: 325vh;
  top: 32vh;
}
.bubble6 {
  left: 375vh;
  top: 12vh;
}
.bubble7 {
  left: 424vh;
  top: 32vh;
}
.bubble8 {
  left: 465vh;
  top: 9vh;
}
.bubble9 {
  left: 521vh;
  top: 34vh;
}
.bubble10 {
  left: 566vh;
  top: 4vh;
}
.bubble11 {
  left: 620vh;
  top: 19vh;
}
.bubble12 {
  left: 670vh;
  top: 28vh;
}
.bubble13 {
  left: 723vh;
  top: 7vh;
}
.bubble14 {
  left: 770vh;
  top: 25vh;
}
.bubble15 {
  left: 831vh;
  top: 12vh;
}
.bubble16 {
  left: 879vh;
  top: 33vh;
}
.bubble17 {
  left: 922vh;
  top: 7vh;
}
.bubble18 {
  left: 963vh;
  top: 26vh;
}
.bubble19 {
  left: 1020vh;
  top: 12vh;
}
.bubble20 {
  left: 1065vh;
  top: 27vh;
}
.bubble21 {
  left: 1114vh;
  top: 3vh;
}
.bubble22 {
  left: 1160vh;
  top: 25vh;
}
.bubble23 {
  left: 1221vh;
  top: 33vh;
}
.bubble24 {
  left: 1267vh;
  top: 7vh;
}
.bubble25 {
  left: 1319vh;
  top: 31vh;
}
.bubble26 {
  left: 1364vh;
  top: 11vh;
}
.bubble27 {
  left: 1422vh;
  top: 28vh;
}
.door {
  left: 1480vh;
  top: 0;
}
.door .image {
  height: 100vh;
}
.door .colorPreviousChapter {
  right: 5vh;
  top: 64vh;
}
.progress {
  position: absolute;
}
.progress img {
  position: absolute;
}
.progress img.s {
  height: 3vh;
}
.progress img.m {
  height: 4.5vh;
}
.progress img.l {
  height: 6vh;
}
.progress.chapter1 {
  top: 27vh;
  left: 154vh;
}
.progress.chapter1 img.s {
  top: 3vh;
  left: -3vh;
}
.progress.chapter1 img.m {
  top: 5vh;
  left: 8vh;
}
.progress.chapter1 img.l {
  left: 1vh;
}
.progress.chapter2 {
  top: 50vh;
  left: 206vh;
}
.progress.chapter2 img.s {
  top: 2vh;
  left: 8vh;
}
.progress.chapter2 img.m {
  top: -2vh;
  left: -5vh;
}
.progress.chapter2 img.l {
  top: 3vh;
  left: 1vh;
}
.progress.chapter3 {
  top: 29vh;
  left: 260vh;
}
.progress.chapter3 img.s {
  top: 3vh;
  left: 8vh;
}
.progress.chapter3 img.m {
  top: 5vh;
  left: -3vh;
}
.progress.chapter3 img.l {
  left: 1vh;
}
.progress.chapter4 {
  top: 61vh;
  left: 311vh;
}
.progress.chapter4 img.s {
  top: 0vh;
  left: 9vh;
}
.progress.chapter4 img.m {
  top: -4vh;
  left: -3vh;
}
.progress.chapter4 img.l {
  left: 1vh;
}
.progress.chapter5 {
  top: 24vh;
  left: 363vh;
}
.progress.chapter5 img.s {
  top: 2vh;
  left: 9vh;
}
.progress.chapter5 img.m {
  top: 6vh;
  left: -3vh;
}
.progress.chapter5 img.l {
  left: 1vh;
}
.progress.chapter6 {
  top: 55vh;
  left: 410vh;
}
.progress.chapter6 img.s {
  top: 2vh;
  left: 9vh;
}
.progress.chapter6 img.m {
  top: -3vh;
  left: -4vh;
}
.progress.chapter6 img.l {
  left: 1vh;
}
.progress.chapter7 {
  top: 23vh;
  left: 451vh;
}
.progress.chapter7 img.s {
  top: 2vh;
  left: 9vh;
}
.progress.chapter7 img.m {
  top: 4vh;
  left: -4vh;
}
.progress.chapter7 img.l {
  left: 1vh;
}
.progress.chapter8 {
  top: 60vh;
  left: 508vh;
}
.progress.chapter8 img.s {
  top: 0vh;
  left: 9vh;
}
.progress.chapter8 img.m {
  top: -5vh;
  left: -4vh;
}
.progress.chapter8 img.l {
  left: 1vh;
}
.progress.chapter9 {
  top: 23vh;
  left: 552vh;
}
.progress.chapter9 img.s {
  top: 2vh;
  left: 9vh;
}
.progress.chapter9 img.m {
  top: 6vh;
  left: -4vh;
}
.progress.chapter9 img.l {
  left: 1vh;
}
.progress.chapter10 {
  top: 46vh;
  left: 606vh;
}
.progress.chapter10 img.s {
  top: 0vh;
  left: 9vh;
}
.progress.chapter10 img.m {
  top: -5vh;
  left: -4vh;
}
.progress.chapter10 img.l {
  left: 1vh;
}
.progress.chapter11 {
  top: 26vh;
  left: 665vh;
}
.progress.chapter11 img.s {
  top: 6vh;
  left: 8vh;
}
.progress.chapter11 img.m {
  top: 3vh;
  left: -4vh;
}
.progress.chapter11 img.l {
  left: 1vh;
}
.progress.chapter12 {
  top: 53vh;
  left: 728vh;
}
.progress.chapter12 img.s {
  top: -6vh;
  left: 7vh;
}
.progress.chapter12 img.m {
  top: 4vh;
  left: -5vh;
}
.progress.chapter12 img.l {
  left: 1vh;
}
.progress.chapter13 {
  top: 18vh;
  left: 770vh;
}
.progress.chapter13 img.s {
  top: 6vh;
  left: 8vh;
}
.progress.chapter13 img.m {
  top: 2vh;
  left: -5vh;
}
.progress.chapter13 img.l {
  left: 1vh;
}
.progress.chapter14 {
  top: 52vh;
  left: 825vh;
}
.progress.chapter14 img.s {
  top: -6vh;
  left: 7vh;
}
.progress.chapter14 img.m {
  top: 1vh;
  left: -5vh;
}
.progress.chapter14 img.l {
  left: 1vh;
}
.progress.chapter15 {
  top: 24vh;
  left: 878vh;
}
.progress.chapter15 img.s {
  top: 6vh;
  left: 8vh;
}
.progress.chapter15 img.m {
  top: 2vh;
  left: -5vh;
}
.progress.chapter15 img.l {
  left: 1vh;
}
.progress.chapter16 {
  top: 54vh;
  left: 928vh;
}
.progress.chapter16 img.s {
  top: -6vh;
  left: 7vh;
}
.progress.chapter16 img.m {
  top: 3vh;
  left: -6vh;
}
.progress.chapter16 img.l {
  left: 1vh;
}
.progress.chapter17 {
  top: 16vh;
  left: 969vh;
}
.progress.chapter17 img.s {
  top: 6vh;
  left: 9vh;
}
.progress.chapter17 img.m {
  top: 4vh;
  left: -5vh;
}
.progress.chapter17 img.l {
  left: 1vh;
}
.progress.chapter18 {
  top: 52vh;
  left: 1015vh;
}
.progress.chapter18 img.s {
  top: -4vh;
  left: 7vh;
}
.progress.chapter18 img.m {
  top: 1vh;
  left: -5vh;
}
.progress.chapter18 img.l {
  left: 1vh;
}
.progress.chapter19 {
  top: 20vh;
  left: 1067vh;
}
.progress.chapter19 img.s {
  top: 5vh;
  left: 8vh;
}
.progress.chapter19 img.m {
  top: 3vh;
  left: -4vh;
}
.progress.chapter19 img.l {
  left: 1vh;
}
.progress.chapter20 {
  top: 47vh;
  left: 1124vh;
}
.progress.chapter20 img.s {
  top: -3vh;
  left: 7vh;
}
.progress.chapter20 img.m {
  top: 0vh;
  left: -5vh;
}
.progress.chapter20 img.l {
  left: 1vh;
}
.progress.chapter21 {
  top: 17vh;
  left: 1163vh;
}
.progress.chapter21 img.s {
  top: 6vh;
  left: 8vh;
}
.progress.chapter21 img.m {
  top: 1vh;
  left: -5vh;
}
.progress.chapter21 img.l {
  left: 1vh;
}
.progress.chapter22 {
  top: 66vh;
  left: 1210vh;
}
.progress.chapter22 img.s {
  top: -1vh;
  left: 9vh;
}
.progress.chapter22 img.m {
  top: -2vh;
  left: -5vh;
}
.progress.chapter22 img.l {
  left: 1vh;
}
.progress.chapter23 {
  top: 22vh;
  left: 1251vh;
}
.progress.chapter23 img.s {
  top: 4vh;
  left: 10vh;
}
.progress.chapter23 img.m {
  top: 5vh;
  left: -5vh;
}
.progress.chapter23 img.l {
  left: 1vh;
}
.progress.chapter24 {
  top: 59vh;
  left: 1306vh;
}
.progress.chapter24 img.s {
  top: 0vh;
  left: 10vh;
}
.progress.chapter24 img.m {
  top: -4vh;
  left: -5vh;
}
.progress.chapter24 img.l {
  left: 1vh;
}
.progress.chapter25 {
  top: 20vh;
  left: 1351vh;
}
.progress.chapter25 img.s {
  top: 2vh;
  left: 10vh;
}
.progress.chapter25 img.m {
  top: 5vh;
  left: -5vh;
}
.progress.chapter25 img.l {
  left: 1vh;
}
.progress.chapter26 {
  top: 60vh;
  left: 1408vh;
}
.progress.chapter26 img.s {
  top: 0vh;
  left: 10vh;
}
.progress.chapter26 img.m {
  top: -3vh;
  left: -4vh;
}
.progress.chapter26 img.l {
  left: 1vh;
}
.progress.chapter27 {
  top: 23vh;
  left: 1465vh;
}
.progress.chapter27 img.s {
  top: 8vh;
  left: 10vh;
}
.progress.chapter27 img.m {
  top: 3vh;
  left: -6vh;
}
.progress.chapter27 img.l {
  left: 1vh;
}
.colorPreviousChapter {
  position: absolute;
  bottom: -5vh;
  right: 2vh;
  transition: opacity 0.5s;
}
.colorPreviousChapter img {
  height: 17vh;
}
.colorPreviousChapter .text {
  position: absolute;
  top: 4.5vh;
  right: 2vh;
  font-size: 1.8vh;
  text-align: center;
  inline-size: 10vh;
  white-space: wrap;
  line-height: 2.1vh;
}