* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    background: rgb(32, 35, 48);
}

#text {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: auto;
    transform: translate(-50%, -50%);
    animation: fill .5s ease forwards 8.4s;
}

#text path:nth-child(1) {
    stroke-dasharray: 340.8399963378906;
    stroke-dashoffset: 340.8399963378906;
    animation: text-anim 2s ease forwards;
}

#text path:nth-child(2) {
    stroke-dasharray: 420.27996826171875;
    stroke-dashoffset: 420.27996826171875;
    animation: text-anim 2s ease forwards .3s;
}

#text path:nth-child(3) {
    stroke-dasharray: 431.5347900390625;
    stroke-dashoffset: 431.5347900390625;
    animation: text-anim 2s ease forwards .6s;
}

#text path:nth-child(4) {
    stroke-dasharray: 472.6314392089844;
    stroke-dashoffset: 472.6314392089844;
    animation: text-anim 2s ease forwards .9s;
}

#text path:nth-child(5) {
    stroke-dasharray: 201.17999267578125;
    stroke-dashoffset: 201.17999267578125;
    animation: text-anim 2s ease forwards 1.2s;
}

#text path:nth-child(6) {
    stroke-dasharray: 368.3861999511719;
    stroke-dashoffset: 368.3861999511719;
    animation: text-anim 2s ease forwards 1.5s;
}

#text path:nth-child(7) {
    stroke-dasharray: 711.5400390625;
    stroke-dashoffset: 711.5400390625;
    animation: text-anim 2s ease forwards 1.8s;
}

#text path:nth-child(8) {
    stroke-dasharray: 468.360107421875;
    stroke-dashoffset: 468.360107421875;
    animation: text-anim 2s ease forwards 2.1s;
}

#text path:nth-child(9) {
    stroke-dasharray: 431.5347900390625;
    stroke-dashoffset: 431.5347900390625;
    animation: text-anim 2s ease forwards 2.4s;
}

#text path:nth-child(10) {
    stroke-dasharray: 309.679931640625;
    stroke-dashoffset: 309.679931640625;
    animation: text-anim 2s ease forwards 2.7s;
}

#text path:nth-child(11) {
    stroke-dasharray: 361.10693359375;
    stroke-dashoffset: 361.10693359375;
    animation: text-anim 2s ease forwards 3s;
}

#text path:nth-child(12) {
    stroke-dasharray: 431.5481262207031;
    stroke-dashoffset: 431.5481262207031;
    animation: text-anim 2s ease forwards 3.3s;
}

#text path:nth-child(13) {
    stroke-dasharray: 546.7221069335938;
    stroke-dashoffset: 546.7221069335938;
    animation: text-anim 2s ease forwards 3.6s;
}

#text path:nth-child(14) {
    stroke-dasharray: 85.07979583740234;
    stroke-dashoffset: 85.07979583740234;
    animation: text-anim 2s ease forwards 3.9s;
}

#text path:nth-child(15) {
    stroke-dasharray: 309.679931640625;
    stroke-dashoffset: 309.679931640625;
    animation: text-anim 2s ease forwards 4.2s;
}

#text path:nth-child(16) {
    stroke-dasharray: 502.678955078125;
    stroke-dashoffset: 502.678955078125;
    animation: text-anim 2s ease forwards 4.5s;
}

#text path:nth-child(17) {
    stroke-dasharray: 420.28009033203125;
    stroke-dashoffset: 420.28009033203125;
    animation: text-anim 2s ease forwards 4.8s;
}

#text path:nth-child(18) {
    stroke-dasharray: 309.679931640625;
    stroke-dashoffset: 309.679931640625;
    animation: text-anim 2s ease forwards 5.1s;
}

#text path:nth-child(19) {
    stroke-dasharray: 472.6476135253906;
    stroke-dashoffset: 472.6476135253906;
    animation: text-anim 2s ease forwards 5.4s;
}

#text path:nth-child(20) {
    stroke-dasharray: 428.06982421875;
    stroke-dashoffset: 428.06982421875;
    animation: text-anim 2s ease forwards 5.7s;
}

#text path:nth-child(21) {
    stroke-dasharray: 368.3963928222656;
    stroke-dashoffset: 368.3963928222656;
    animation: text-anim 2s ease forwards 6s;
}

#text path:nth-child(22) {
    stroke-dasharray: 309.679931640625;
    stroke-dashoffset: 309.679931640625;
    animation: text-anim 2s ease forwards 6.3s;
}

#text path:nth-child(23) {
    stroke-dasharray: 420.29986572265625;
    stroke-dashoffset: 420.29986572265625;
    animation: text-anim 2s ease forwards 6.6s;
}

#text path:nth-child(24) {
    stroke-dasharray: 500.5038757324219;
    stroke-dashoffset: 500.5038757324219;
    animation: text-anim 2s ease forwards 6.9s;
}


@keyframes text-anim {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fill {
    from {
        fill: transparent;
    }

    to {
        fill: rgb(255, 255, 255);
    }
}