html, body {
  margin: 0;
  background-color: #171A29;
  background-color: transparent;
  display: grid;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  color: white;
  overflow: hidden;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes success-badge {
  0% {
    opacity: 0;
    transform: scale(10%);
  }
  56% {
    opacity: 0;
    transform: scale(10%);
  }
  58% {
    opacity: 1;
    transform: scale(120%);
  }
  60% {
    opacity: 1;
    transform: scale(100%);
  }
  100% {
    opacity: 1;
    transform: scale(100%);
  }
}
@keyframes error-badge {
  0% {
    opacity: 0;
    transform: scale(10%);
  }
  14% {
    opacity: 0;
    transform: scale(10%);
  }
  18% {
    opacity: 1;
    transform: scale(120%);
  }
  20% {
    opacity: 1;
    transform: scale(100%);
  }
  56% {
    opacity: 1;
    transform: scale(100%);
  }
  58% {
    opacity: 0;
    transform: scale(10%);
  }
  100% {
    opacity: 0;
    transform: scale(10%);
  }
}
@keyframes error-badge-2 {
  0% {
    opacity: 0;
    transform: scale(10%);
  }
  16% {
    opacity: 0;
    transform: scale(10%);
  }
  20% {
    opacity: 1;
    transform: scale(120%);
  }
  22% {
    opacity: 1;
    transform: scale(100%);
  }
  56% {
    opacity: 1;
    transform: scale(100%);
  }
  58% {
    opacity: 0;
    transform: scale(10%);
  }
  100% {
    opacity: 0;
    transform: scale(10%);
  }
}
@keyframes error-badge-3 {
  0% {
    opacity: 0;
    transform: scale(10%);
  }
  18% {
    opacity: 0;
    transform: scale(10%);
  }
  22% {
    opacity: 1;
    transform: scale(120%);
  }
  24% {
    opacity: 1;
    transform: scale(100%);
  }
  56% {
    opacity: 1;
    transform: scale(100%);
  }
  58% {
    opacity: 0;
    transform: scale(10%);
  }
  100% {
    opacity: 0;
    transform: scale(10%);
  }
}
@keyframes messy-arrow-1 {
  0% {
    fill-opacity: 0;
    transform: scale(10%);
  }
  10% {
    fill-opacity: 0;
    transform: scale(10%);
  }
  14% {
    fill-opacity: 0.8;
    transform: scale(100%);
  }
  16% {
    fill-opacity: 0.5;
    transform: scale(100%);
  }
  45% {
    fill-opacity: 0.5;
    transform: scale(100%);
  }
  48% {
    fill-opacity: 0;
    transform: scale(100%);
  }
  100% {
    fill-opacity: 0;
    transform: scale(10%);
  }
}
@keyframes messy-arrow-2 {
  0% {
    fill-opacity: 0;
    transform: scale(10%);
  }
  12% {
    fill-opacity: 0;
    transform: scale(10%);
  }
  16% {
    fill-opacity: 0.8;
    transform: scale(100%);
  }
  18% {
    fill-opacity: 0.5;
    transform: scale(100%);
  }
  45% {
    fill-opacity: 0.5;
    transform: scale(100%);
  }
  48% {
    fill-opacity: 0;
    transform: scale(100%);
  }
  100% {
    fill-opacity: 0;
    transform: scale(10%);
  }
}
@keyframes messy-arrow-3 {
  0% {
    fill-opacity: 0;
    transform: scale(10%);
  }
  14% {
    fill-opacity: 0;
    transform: scale(10%);
  }
  18% {
    fill-opacity: 0.8;
    transform: scale(100%);
  }
  20% {
    fill-opacity: 0.5;
    transform: scale(100%);
  }
  45% {
    fill-opacity: 0.5;
    transform: scale(100%);
  }
  48% {
    fill-opacity: 0;
    transform: scale(100%);
  }
  100% {
    fill-opacity: 0;
    transform: scale(10%);
  }
}
@keyframes radial-arrow {
  0% {
    fill-opacity: 0;
    transform: scale(10%);
  }
  52% {
    fill-opacity: 0;
    transform: scale(10%);
  }
  54% {
    fill-opacity: 0.8;
    transform: scale(100%);
  }
  56% {
    fill-opacity: 0.5;
    transform: scale(100%);
  }
  100% {
    fill-opacity: 0.5;
    transform: scale(100%);
  }
}
@keyframes radial-arrow-2 {
  0% {
    fill-opacity: 0;
    transform: scale(10%);
  }
  54% {
    fill-opacity: 0;
    transform: scale(10%);
  }
  56% {
    fill-opacity: 0.8;
    transform: scale(100%);
  }
  58% {
    fill-opacity: 0.5;
    transform: scale(100%);
  }
  100% {
    fill-opacity: 0.5;
    transform: scale(100%);
  }
}
@keyframes radial-arrow-3 {
  0% {
    fill-opacity: 0;
    transform: scale(10%);
  }
  56% {
    fill-opacity: 0;
    transform: scale(10%);
  }
  58% {
    fill-opacity: 0.8;
    transform: scale(100%);
  }
  60% {
    fill-opacity: 0.5;
    transform: scale(100%);
  }
  100% {
    fill-opacity: 0.5;
    transform: scale(100%);
  }
}
@keyframes logos {
  0% {
    opacity: 0;
    transform: scale(10%);
  }
  50% {
    opacity: 0;
    transform: scale(10%);
  }
  52% {
    opacity: 1;
    transform: scale(120%);
  }
  54% {
    opacity: 1;
    transform: scale(100%);
  }
  100% {
    opacity: 1;
    transform: scale(100%);
  }
}
/*  RADIAL LINES    */
.svg {
  opacity: 0;
}

#svg {
  width: 100vw;
  max-width: 800px;
  height: 100vh;
  max-height: 600px;
  object-fit: contain;
  opacity: 0;
}

.animation {
  opacity: 0;
  animation: fade-in 12s ease;
  transform-origin: center;
  transform-box: fill-box;
  animation-fill-mode: forwards;
  animation-iteration-count: 3;
  transform: scale(1);
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  /*  LOGOS  */
  /*  ERROR BADGES    */
  /*  SUCCESS BADGES    */
  /*  MESSY LINES    */
  /*  RADIAL LINES    */
}
.animation #Logos {
  opacity: 0;
  animation: logos 12s ease;
  transform-origin: center;
  transform-box: fill-box;
  animation-fill-mode: forwards;
  animation-iteration-count: 3;
}
.animation #error-0, .animation #error-1 {
  animation: error-badge 12s ease;
}
.animation #error-2, .animation #error-3 {
  animation: error-badge-2 12s ease;
}
.animation #error-4, .animation #error-5, .animation #error-6 {
  animation: error-badge-3 12s ease;
}
.animation #error-0, .animation #error-1, .animation #error-2, .animation #error-3, .animation #error-4, .animation #error-5, .animation #error-6 {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation-fill-mode: forwards;
  animation-iteration-count: 3;
}
.animation #success-0, .animation #success-1, .animation #success-2, .animation #success-3, .animation #success-4, .animation #success-5 {
  opacity: 0;
  animation: success-badge 12s ease;
  animation-delay: 0s;
  transform-origin: center;
  transform-box: fill-box;
  animation-fill-mode: forwards;
  animation-iteration-count: 3;
}
.animation #messy-line-2, .animation #messy-line-1, .animation #messy-line-0 {
  animation: messy-arrow-1 12s ease;
}
.animation #messy-line-3, .animation #messy-line-4, .animation #messy-line-5 {
  animation: messy-arrow-2 12s ease;
}
.animation #messy-line-6, .animation #messy-line-7, .animation #messy-line-8, .animation #messy-line-9 {
  animation: messy-arrow-3 12s ease;
}
.animation #messy-line-9, .animation #messy-line-8, .animation #messy-line-7, .animation #messy-line-6, .animation #messy-line-5,
.animation #messy-line-4, .animation #messy-line-3, .animation #messy-line-2, .animation #messy-line-1, .animation #messy-line-0 {
  fill-opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation-fill-mode: forwards;
  animation-iteration-count: 3;
}
.animation #arrow-0, .animation #arrow-1 {
  animation: radial-arrow 12s ease;
}
.animation #arrow-2, .animation #arrow-3 {
  animation: radial-arrow-2 12s ease;
}
.animation #arrow-4, .animation #arrow-5 {
  animation: radial-arrow-3 12s ease;
}
.animation #arrow-0, .animation #arrow-1, .animation #arrow-2, .animation #arrow-3, .animation #arrow-4, .animation #arrow-5 {
  fill-opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation-fill-mode: forwards;
  animation-iteration-count: 3;
}