/* MASTER STYLING: FOR ALL HTMLS */

/* IMPORT DREW FONT (Nanum Pen Script) */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

/* MASTER BODY*/
body {
  font-family: 'Nanum Pen Script';
  font-size: 3rem;
  background: white;
}

@media screen and (max-width:768px) {
  body {
    font-size: 2rem;
  }
}

.story-text-container {
  opacity: 0;
  animation: text-refresh 2s ease-in calc(var(--scroll) * -2s) paused;
}

@keyframes text-refresh {
  0% {
    opacity: 0;
  }

  2% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

/* BACKGROUND */
.paper-texture {
  position: fixed;
  width: 100vw;
  height: 100vh;
  opacity: 0.5;
}

/* TEXT */
.story-text {
  position: fixed;
  text-align: center;
  top: 10vh;
  left: 10vw;
  width: 80vw;
}

/* BUTTON TO GO BACK */
.up {
  position: fixed;
  top: 1vh;
  left: calc(50vw - 25px);
  width: 10vw;
  max-width: 50px;
  transform: scale(1);
  animation: up 2s calc(var(--scroll) * -2s) ease-in-out paused;
}

/* SCROLL-DOWN ICON */
.scrolldown {
  position: fixed;
  top: 90vh;
  left: calc(50vw - 25px);
  width: 10vw;
  max-width: 50px;
  animation: scrolldown 2s calc(var(--scroll) * -2s) ease-in-out paused;
}

/* DREW WIGGLE */
.wiggle {
  position: fixed;
  height: 50vh;
  transform-origin: bottom center;
  animation: wiggle-effect 2s ease-in-out infinite;

}


/* ANIMATION DREW WIGGLE */
@keyframes wiggle-effect {
  0% {
    transform: rotate(2deg);
  }

  50% {
    transform: rotate(-2deg);
  }

  100% {
    transform: rotate(2deg);
  }
}

/* DREW WIGGLE BLACK*/
.wiggle-black {
  position: fixed;
  height: 50vh;
  transform-origin: bottom center;
  animation: wiggle-effect-black 2s ease-in-out infinite
}


/* ANIMATION DREW WIGGLE */
@keyframes wiggle-effect-black {
  0% {
    transform: rotate(2deg);
  }

  50% {
    transform: rotate(-2deg);
  }

  100% {
    transform: rotate(2deg);
  }
}

/* ANIMATION BUTTON TO GO BACK */
@keyframes up {
  0% {
    transform: translate(0, 0) scale(1);
  }

  1% {
    transform: translate(0, -30vh) scale(0);
  }

  100% {
    transform: scale(0);
  }
}

/* ANIMATION SCROLL-DOWN ICON */
@keyframes scrolldown {
  0% {
    transform: translate(0, 0) scale(1);
  }

  1% {
    transform: translate(0, 30vh) scale(0);
  }

  100% {
    transform: scale(0);
  }
}