.titleFadeIn {
  animation: 1s ease-in-out forwards;
  animation-name: titleAnimation;
}

@keyframes titleAnimation {
  0% {
    transform: translateY(-300px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.mouseScroll {
  animation: 1s ease-in-out forwards 2;
  animation-name: mouseAnimation;
}

.mouseScroll:hover {
  animation: 1s ease-in-out forwards;
  animation-name: mouseAnimation;
}

@keyframes mouseAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}

.hide {
  animation: 250ms linear forwards;
  animation-name: projectFadeOut;
}

.show {
  animation: 250ms linear forwards;
  animation-name: projectFadeIn;
}

@keyframes projectFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes projectFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.timeline {
  animation: timelineAnimation 3s ease-in forwards;
}

.end-year {
  animation: endYearAnimation 3s ease-in forwards;
}

@keyframes timelineAnimation {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
@keyframes endYearAnimation {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  95% {
    transform: scale(0);
  }
  99% {
    transform: scale(1);
    opacity: 1;
  }
}