@keyframes avatarIcons {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
    filter: drop-shadow(1px 1px 25px var(--primary-color));
    -webkit-filter: drop-shadow(1px 1px 25px var(--primary-color));
  }
  100% {
    transform: translateY(0);
  } 
}

@keyframes scrollDown {
    0% {
        transform: translateY(0);
        /* transform: translate(-50%, -50%); */
    }
    50% {
        transform: translateY(8px);
        /* transform: translate(-50%, -50%); */
    }
    100% {
        transform: translateY(0);
        /* transform: translate(-50%, -50%); */
    }
}

@keyframes scrollDownMouse {
    0% {
        transform: translateY(0);
        opacity: 1;
        /* transform: translate(-50%, -50%); */
    }
    50% {
        transform: translateY(8px);
        opacity: 0.5;
        /* transform: translate(-50%, -50%); */
    }
    100% {
        transform: translateY(0);
        opacity: 1;
        /* transform: translate(-50%, -50%); */
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceIn {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
	20%, 50%, 80%, 100% {
    transform: translateY(0);
    /* opacity: 0; */
  }
	40% {
    transform: translateY(30px);
  }
	60% {
    transform: translateY(15px);
  }
}