body {
  background: #131313;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

#SplashScreenDiv {
  animation: flash 2s infinite;
  animation-delay: 1.5s;
}

#SplashScreenDiv svg:first-child {
  margin-bottom: 20px;
}

@keyframes flash {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
}

/* Keyframes for drawing the outline */
@keyframes draw-outline {
  from {
    stroke-dashoffset: var(--path-length, 1000);
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* Keyframes for fill in */
@keyframes fill-in {
  from {
    fill: transparent;
  }

  to {
    fill: #fff;
  }
}

/* Animated path styles */
.animated-path {
  stroke: #fff;
  stroke-width: 0.5px;
  fill: transparent;
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
  animation:
    draw-outline 1.5s cubic-bezier(.77, 0, .18, 1) forwards,
    fill-in 0.8s cubic-bezier(.77, 0, .18, 1) forwards 1s;
  /* fill anim starts after outline finishes */
}

.logo-svg {
  width: 90vw;
  max-width: 90px;
  height: auto;
  display: block;
}

.cls-1 {
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 0.1px;
  fill: transparent;
  /* By default, no animation */
}

/* Animate each letter's fill in order */
.letter-k .cls-1 {
  animation: fillIn 0.25s ease-in forwards;
  animation-delay: 0s;
}

.letter-a .cls-1 {
  animation: fillIn 0.25s ease-in forwards;
  animation-delay: 0.25s;
}

.letter-r1 .cls-1 {
  animation: fillIn 0.25s ease-in forwards;
  animation-delay: 0.45s;
}

.letter-r2 .cls-1 {
  animation: fillIn 0.25s ease-in forwards;
  animation-delay: 0.65s;
}

.letter-i .cls-1 {
  animation: fillIn 0.25s ease-in forwards;
  animation-delay: 0.85s;
}

.letter-e .cls-1 {
  animation: fillIn 0.25s ease-in forwards;
  animation-delay: 1.05s;
}

/* Animation keyframes */
@keyframes fillIn {
  to {
    fill: #fff;
  }
}