/* Image of myself  */
@keyframes introPicture {
  from {
    transform: scale(0) rotate(0deg);
  }
  to {
    transform: scale(1) rotate(360deg);
  }
}

/* Rotating squares hero  */
@keyframes rotateSquareOne {
  from {
    opacity: 0;
    transform: rotate(0deg);
  }
  to {
    opacity: 1;
    transform: rotate(45deg);
  }
}

@keyframes rotateSquareTwo{
  from {
    opacity: 0;
    transform: rotate(0deg);
  }
  to {
    opacity: 1;
    transform: rotate(67.5deg);
  }
}

@keyframes rotateSquareThree{
    from {
        opacity: 0;
        transform: rotate(0deg);
    }
    to {
        opacity: 1;
        transform: rotate(-67.5deg);
    }
}

/* Fade in up hero text */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(2.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Pumping heart */

@keyframes pump {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.3); }
  50%  { transform: scale(1); }
  75%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}