@keyframes wiggle{
  0% {
    transform: rotate(0deg) ease-in-out;
  }
  20% {
    transform: rotate(5deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg) ;
  }
  100% {
    transform: rotate(0deg) ease-in-out;;
  }
}

@keyframes glow {
  0% {
    filter: drop-shadow(0 0 10px rgba(255, 230, 0, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(255, 230, 0, 1));
  }
  100% {
    filter: drop-shadow(0 0 10px rgba(255, 230, 0, 0.5));
  }
}



.scrollshow {
    animation: scrollshowAnimation ease-in-out both;
    animation-timeline: view(70% 5%);
}

@keyframes scrollshowAnimation {
  from {
    opacity: 0;
    transform: translateY(-50vh) scale(.3);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.scrolltextbox {
    animation: scrolltextboxAnimation ease-in-out both;
    animation-timeline: view(70% 5%);
}

@keyframes scrolltextboxAnimation {
  from {
    opacity: 0;
    transform: translateX(-200vw) scale(.3);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media only screen and (max-width: 768px) {
.scrollshow {
  animation: scrollshowAnimation ease-in-out both;
  animation-timeline: view(60% 5%);
  animation-duration: 10000.5s; /* add a duration to control the speed of the animation */
  animation-fill-mode: both; /* add this to ensure the animation starts and ends at the correct position */
}



@keyframes scrollshowAnimation {
  0% {
    opacity: 0;
    transform: translateY(-1000vh) scale(.3);
  }
  
  100% {
    opacity: 1;
    transform: translateY(-10vh) scale(1);
  }
}
}