@keyframes background-color {
  to {
    background-color: var(--bg);
  }
}

@keyframes slideUp{
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes slideDown{
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}

/* .slideUp {
  opacity: 0;
  animation: slideUp .12s ease-out;
  transform: translateY(100%);
  --delay: .05;
} */

.fadeUp {
  opacity: 0;
  animation: fade-up 2s linear;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

.bgChange {
  --bg: #ffcb00;
}

.progress {
  width: 0%;
  position: fixed;
  left: 0;
  top: 0;
  animation: progress 1s linear;
  
  @keyframes progress {
    to {
      width: 100%;
    }
  }
}

:root {
  --delay: 0;
}
/* .scrub {
  animation-play-state: paused;
  animation-delay: calc((var(--scroll) - var(--delay)) * -1s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
} */

/* .fade-up div {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease-in-out;
  transition-delay: .15s;
}
.fade-up div:nth-child(1) {transition-delay: .15s;}
.fade-up div:nth-child(2) {transition-delay: .25s;}
.fade-up div:nth-child(3) {transition-delay: .35s;}
.fade-up div:nth-child(4) {transition-delay: .45s;}
.fade-up div:nth-child(5) {transition-delay: .55s;} */


.tabcontent {
  animation: fadeEffect 1s; /* Fade 1 second */
}

/* Go from zero to full opacity */
@keyframes fade-up {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes rotate-left {
  0%,100% {
    /* -webkit-transform: rotate(0deg); */
            transform: rotate(120deg);
            /* transform-origin: 50% 50%; */
  }
  50% {
    /* -webkit-transform: rotate(-10deg); */
            transform: rotate(60deg);
  }
}

@keyframes rotate-right {
    0%,100% {
      /* -webkit-transform: rotate(0deg); */
              transform: rotate(0deg);
    }
    50% {
      /* -webkit-transform: rotate(-10deg); */
              transform: rotate(55deg);
    }
  }

  @keyframes in-left {
    0%,100% {
      /* -webkit-transform: rotate(0deg); */
      /* transform-origin: scaleX(-1); */
        transform: translateX(0px);
              
    }
    50% {
      /* -webkit-transform: rotate(-10deg); */
      transform:translateX(30px);
    }
  }
  
  @keyframes in-right {
      0%,100% {
        /* -webkit-transform: rotate(0deg); */
        transform:translateX(0px);
      }
      50% {
        /* -webkit-transform: rotate(-10deg); */
        transform:translateX(-30px);
      }
    }