@keyframes spin { 
  100% { 
    transform: rotateZ(360deg);
  }
}
/* Initial state for entering element */
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
/* Transition state for entering element */
.fade-enter-active, .fade-leave-active /* .fade-leave-active in <2.1.8 */ {
  transition: opacity 2.5s ease;
}
/* Final state for entered element */
.fade-enter-to, .fade-leave /* .fade-leave-active in <2.1.8 */ {
  opacity: 1;
}
.fadeout-enter, .fadeout-leave-to {
  opacity: 1;
}
.fadeout-enter-active, .fadeout-leave-active {
  transition: opacity 2.5s ease;
}
.fadeout-enter-to, .fadeout-leave {
  opacity: 0;
}
body .typing-container {
  position: relative;
  font-family: monospace;
  white-space: nowrap;
  position: absolute;
  /* top: -20px; */
  /* transform: translateY(50%); */
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  margin: auto;
  bottom: -60px;
  /* left: -50%; */
  transition:all 0.5s;
  pointer-events:none;
  /* prevent select */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}
body .typing-container * {
  color: #0F0; /* Classic Matrix green */
  font-size: 20px;
  text-shadow: 0 0 5px #0F0, 0 0 10px #0F0, 0 0 15px #0F0, 0 0 20px #0F0;
  font-weight: 300;
}
body .typing-container .letter {
  opacity: 0;
  position: relative;
  animation: fadeIn 0.5s forwards;
  min-width: 12px;
  display: inline-block;
  font-family: 'Courier New', monospace;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.cursor {
  position: absolute;
  bottom: 0;
  opacity: 1;
  animation: blink 1s step-end infinite;
  min-width: 12px;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
/* Define fade-in animation */
@keyframes fadeInScrollDown {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Define fade-out animation */
@keyframes fadeOutScrollDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(50px);
  }
}
.fadeer-enter-active, .fader-enter-active {
  animation: fadeInScrollDown 0.5s forwards;
}
.fader-leave-active {
  animation: fadeOutScrollDown 0.25s forwards;
}
.fadeer-leave-active {
  transition:none;
}
/* Define fade-in animation */
@keyframes fadeInScrollDown50 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
/* Define fade-out animation */
@keyframes fadeOutScrollDown50 {
  0% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 50px);
  }
}
.fadeer50-enter-active {
  animation: fadeInScrollDown50 0.5s forwards;
}
.fadeer50-leave-active {
  animation: fadeOutScrollDown50 0.25s forwards;
}