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

@keyframes fade-header {
  0% {
    opacity: 0;
    height: 0;
  }
  100% {
    opacity: 1;
    height: var(--header-height);
  }
}

@keyframes title-appear-x {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

@keyframes title-appear-y {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}

@keyframes table-appear {
  0% {
    /*transform: scaleY(0);*/
    opacity: 0;
  }
  100% {
    /*transform: scaleY(1);*/
    opacity: 1;
  }
}

@keyframes index-card-appear {
  from{
    transform: translateY(5%) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes back-appear {
  from {opacity: 0%;}
  to {opacity: 100%;}
}

@keyframes main-appear-translate{
  from{
    transform: translateY(2.5%);
  }
  to{
    transform: translateY(0);
  }
}

@keyframes main-appear-scale{
  from{
    transform: scale(0.975);
  }
  to{
    transform: scale(1);
  }
}

@keyframes slide-left{
  from{
    left: -1em;
  }
  to{
    left: 0;
  }
}

@keyframes slide-bottom{
  from{
    bottom: -1em;
  }
  to{
    bottom: 0;
  }
}

@keyframes slide-top{
  from{
    top: -1em;
  }
  to{
    top: 0;
  }
}

@keyframes card-appear {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}