.scrolled {
  opacity: 0;
}


#hint-top{
  opacity: 0;
  animation: fade-in-top 1s ease 0s forwards;
}

#hint-middle {
  opacity: 0;
  animation: fade-in-middle 1s ease 0.3s forwards;
}

#hint-bottom {
  opacity: 0;
  animation: fade-in-bottom 1s ease 0.6s forwards;
}

@keyframes fade-in-top{
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

@keyframes fade-in-middle{
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}
@keyframes fade-in-bottom{
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.9;
  }
}