@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');

body {
    width: 100%;
    height: 100%;
    background: #ab2020;
    padding: 0;
    margin: 0;
}

.text-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

svg text {
  /* font-family: 'Staatliches', cursive;  */
    font-family: "Nanum Gothic", "Nanum Gothic", µ¸¿ò, Dotum, Helvetica, AppleGothic, sans-serif; 
    font-size: 1.3em;
    font-weight: 600;
    fill:transparent;
    stroke-dasharray: 126px;
    animation: stroke 3s linear;
    animation-fill-mode: forwards;
}
svg text:nth-child(1) {
    animation-delay: 0s;
}
svg text:nth-child(2) {
    animation-delay: 0.2s;
}
svg text:nth-child(3) {
    animation-delay: 0.4s;
}
svg text:nth-child(4) {
    animation-delay: 0.6s;
}
svg text:nth-child(5) {
    animation-delay: 0.8s;
}
svg text:nth-child(6) {
    animation-delay: 1s;
}
svg text:nth-child(7) {
    animation-delay: 1.2s;
}
svg text:nth-child(8) {
    animation-delay: 1.4s;
}
svg text:nth-child(9) {
    animation-delay: 1.6s;
}
svg text:nth-child(10) {
    animation-delay: 1.8s;
}
svg text:nth-child(11) {
    animation-delay: 2s;
}
svg text:nth-child(12) {
    animation-delay: 2.2s;
}
@keyframes stroke {
    0%   {
        stroke:#ffee00;
        stroke-width: 0.5px;
        stroke-dashoffset: 426px;
    }
    70% {
        fill: transparent;
    }
    98% {
        stroke:#dbdbdb;
        stroke-width: 1px;
    }
    100% {
        fill: #ffffff;
        stroke-dashoffset: 0px;
    }
}