/* Main styles */

:root {
    --stroke-width: 6;
    --font-size: 15em;
    --dash: 100;
    --dash-gap: 5;
    --time: 8s;
    /* Internal custom properties */
    --max: 5;
    --color-1: #F2385A;
    --color-2: #F5A503;
    --color-3: #E9F1DF;
    --color-4: #56D9CD;
    --color-5: #3AA1BF;
    --dash-space: calc(var(--dash) * (var(--max) - 1) + var(--dash-gap) * var(--max));
    --dash-offset: calc((-1px) * (var(--dash) + var(--dash-gap)) * var(--max));
    --time-step: calc(var(--time) / var(--max));
}

.text {
    fill: none;
    stroke-width: var(--stroke-width);
    stroke-linejoin: round;
    stroke-dasharray: var(--dash) var(--dash-space);
    stroke-dashoffset: 0;
    animation: stroke var(--time) infinite linear;
}

.text:nth-child(5n + 1) {
    stroke: var(--color-1);
    animation-delay: calc(var(--time-step) * (-1));
}

.text:nth-child(5n + 2) {
    stroke: var(--color-2);
    animation-delay: calc(var(--time-step) * (-2));
}

.text:nth-child(5n + 3) {
    stroke: var(--color-3);
    animation-delay: calc(var(--time-step) * (-3));
}

.text:nth-child(5n + 4) {
    stroke: var(--color-4);
    animation-delay: calc(var(--time-step) * (-4));
}

.text:nth-child(5n + 5) {
    stroke: var(--color-5);
    animation-delay: calc(var(--time-step) * (-5));
}

@keyframes stroke {
    100% {
        stroke-dashoffset: var(--dash-offset);
    }
}

/* Other styles */

html,
body {
    height: 100%;
}

body {
    background: #111;
    background-size: .2em 100%;
    font: var(--font-size) Open Sans, Impact;
    text-transform: uppercase;
    margin: 0;
}

svg {
    position: absolute;
    width: 100%;
    height: 100%;
}