/* Observed Animations */

.hiddenLeft{
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  transition: opacity 2s ease, filter 2s,
  transform 1s ease;
 }

 .hiddenRight{
  opacity: 0;
  filter: blur(5px);
  transform: translateX(100%);
  transition: opacity 2s, filter 2s,
  transform 1s;
 }
 
.show{
  opacity: 1;

  filter: blur(0);
  transform: translateX(0);
}


.delay:nth-child(1){
  transition-delay: 50ms;
}
.delay:nth-child(2){
  transition-delay: 100ms;
}
.delay:nth-child(3){
  transition-delay: 150ms;
}
.delay:nth-child(4){
  transition-delay: 200ms;
}
.delay:nth-child(5){
  transition-delay: 250ms;
}
.delay:nth-child(6){
  transition-delay: 300ms;
}
.delay:nth-child(7){
  transition-delay: 350ms;
}


@media (prefers-reduced-motion) {
  .hiddenLeft,
  .hiddenRight {
    transition: none;
  }
}


.animate-title-top{
  animation: animateTitleTop 1.4s ease;
}

@keyframes animateTitleTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
    filter: blur(10px);
  }

  to {
    transform: translateY(0%);
    opacity: 1;
    filter: blur(0);
  }

}