/* ======================================
FONT
=========================================*/
body {
    font-family: "Space Mono", monospace;
}

/* ======================================
 ANIMATIONS
=========================================*/

/* Referenced from Geoff Graham https://css-tricks.com/snippets/css/typewriter-effect/ */
/* Typing animation */
/* First part: type 6 chars */
@keyframes typing-part1 {
  from { width: 0; }
  to   { width: 7ch; }
}

/* Second part: type remaining 12 chars */
@keyframes typing-part2 {
  from { width: 7ch; }
  to   { width: 17ch; }
}


/* Blinking cursor animation */
@keyframes blink-caret {
  0%, 100% { border-color: transparent; }
  50% { border-color: #C9B752; }
}
.typewriter {
  overflow: hidden;               /* hide overflowing text */
  border-right: 0.15em solid #C9B752; /* typewriter cursor */
  white-space: nowrap;             /* keep text on one line */
  margin: 0 auto;
  width: 17ch;
  animation: 
    typing-part1 1.5s steps(7, end) 1 forwards, /* type letters one by one */
    typing-part2 3.0s steps(12, end) 1 forwards 2.8s,
    blink-caret 0.75s step-end infinite;   /* blinking cursor */
}

/* Fade up animation*/
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  opacity:0;
  animation: fadeUp 3s ease-out 4.5s 1 forwards;
}


/* Fade down animation*/
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translate3d(-50%, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0); ;
  }
}

.fade-down {
  opacity:0;
  animation: fadeDown 3s ease-out 4.5s 1 forwards;
}

/* Smooth jump to section */
html {
  scroll-behavior: smooth;
}