@keyframes rollInLogo {
  0% {
    opacity: 0;
    transform: rotate(180deg) translateX(-200%);
  }

  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) translateX(0);
  }
}

@keyframes rotateLogo {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(540deg);
  }

  100% {
    transform: rotate(720deg);
  }
}

@keyframes rollUpPhoto {
  0% {
    opacity: 0;
    transform: translateY(4rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-picture {
  animation: 1s rollUpPhoto ease-in-out;
}

@keyframes rollDownHeader {
  0% {
    background-color: #9c27b0;
    opacity: 0;
    transform: translateY(-4rem);
  }
  100% {
    background-color: transparent;
    opacity: 1;
    transform: translateY(0);
  }
}

header {
  animation: 1s rollDownHeader ease-in-out;
}