salihabrik / challenge Goto Github PK

.emoji {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
}
.typing-1 {
  opacity: 0;
  animation: fade-in-out 1.5s;
}
.msg-1 {
  animation: wait 1.7s, msg-1 0.2s 1.7s;
}
.typing-2 {
  opacity: 0;
  animation: wait 2.5s, fade-in-out 1.5s 2.5s;
}
.msg-2 {
  animation: wait 4.2s, msg-2 0.2s 4.2s;
}
.typing-3 {
  opacity: 0;
  animation: wait 5s, fade-in-out 1.5s 5s;
}
.msg-3 {
  animation: wait 6.7s, msg-3 0.2s 6.7s;
}
.typing-4 {
  opacity: 0;
  animation: wait 7.5s, fade-in-out 1.5s 7.5s;
}
.msg-4 {
  animation: wait 9.2s, msg-4 0.2s 9.2s;
}
.typing-5 {
  opacity: 0;
  animation: wait 10s, fade-in-out 1.5s 10s;
}
.msg-5 {
  animation: wait 11.7s, msg-5 0.2s 11.7s;
}
.typing-6 {
  opacity: 0;
  animation: wait 12.5s, fade-in-out 1.5s 12.5s;
}
.msg-6 {
  animation: wait 14.2s, msg-6 0.2s 14.2s;
}
@keyframes wait {
  0%,
  100% {
    opacity: 0;
  }
}
@keyframes fade-in-out {
  0%,
  100% {
    opacity: 0;
  }
  25%,
  90% {
    opacity: 1;
  }
}
@keyframes msg-1 {
  0% {
    opacity: 0;
    transform: translate(10px, 5px);
  }
  100% {
    opacity: 1;
    transform: translate(10px, 0);
  }
}
@keyframes msg-2 {
  0% {
    opacity: 0;
    transform: translate(10px, 53px);
  }
  100% {
    opacity: 1;
    transform: translate(10px, 48px);
  }
}
@keyframes msg-3 {
  0% {
    opacity: 0;
    transform: translate(10px, 125px);
  }
  100% {
    opacity: 1;
    transform: translate(10px, 120px);
  }
}
@keyframes msg-4 {
  0% {
    opacity: 0;
    transform: translate(10px, 197px);
  }
  100% {
    opacity: 1;
    transform: translate(10px, 192px);
  }
}
@keyframes msg-5 {
  0% {
    opacity: 0;
    transform: translate(10px, 245px);
  }
  100% {
    opacity: 1;
    transform: translate(10px, 240px);
  }
}
@keyframes msg-6 {
  0% {
    opacity: 0;
    transform: translate(10px, 293px);
  }
  100% {
    opacity: 1;
    transform: translate(10px, 288px);
  }
}
@media (prefers-color-scheme: dark) {
  .bubble {
    fill: #3b3b3d;
  }
  text {
    fill: #dcdcdc;
  }
  a {
    fill: #0c82f9;
  }
}