#dText.HaMavdil {
    width: 100%;
    text-align: center;
    text-align-last: center;
    direction: rtl;
}

#dText.HaMavdil span {
    position: relative;
    display: inline-block;
    min-width: 1ch;
    height: 1vh;
}

#dText span.mavdil0 {
    animation: to_right var(--period) ease-in-out 3s forwards 1;
    text-align-last: left;
    animation-play-state: running;
}

#dText span.mavdil1 {
    animation: to_left var(--period) ease-in-out 3s forwards 1;
    text-align-last: right;
    animation-play-state: running;
}

#dText span.gather0 {
    animation: to_right var(--period) ease-in-out 1s reverse 1;
    text-align: left;
    animation-play-state: running;

    left: 200px;
}

#dText span.gather1 {
    animation: to_left var(--period) ease-in-out 1s reverse 1;
    text-align: right;
    animation-play-state: running;
    min-width: 13ch;
    left: -200px;
}

#dText.Gone span {
    left: 0;
    min-width: 1ch;

}

@keyframes to_left {

    0%,
    20%,
    40%,
    60% {
        left: 0;
        min-width: 1ch;
    }

    10%,
    30%,
    50%,
    70% {
        min-width: 13ch;
        left: 0;
    }

    100% {
        min-width: 13ch;
        left: -200px;
    }
}

@keyframes to_right {

    0%,
    20%,
    40%,
    60% {
        left: 0;
        min-width: 1ch;
    }

    10%,
    30%,
    50%,
    70% {
        min-width: 13ch;
        left: 0;
    }

    100% {
        left: 200px;
        min-width: 13ch;
    }
}

#dText span.far0,
#dText span.far1 {
    animation: blink 6s ease-in-out 3s forwards 100,
        dance_0 10s ease-in-out 60s forwards 50;
    animation-play-state: running;
    left: 200px;
    min-width: 13ch;
}

#dText span.far1 {
    animation: blink 6s ease-in-out 3s forwards 100,
        dance_1 10s ease-in-out  60s forwards 50;
    left: -200px;
}

@keyframes dance_0 {

    0%,
    20%,
    80%,
    100% {
        left: 200px;
    }

    30%,
    70% {
        left: 0;
    }

}

@keyframes dance_1 {

    0%,
    20%,
    80%,
    100% {
        left: -200px;
    }

    30%,
    70% {
        left: 0;
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    60% {
        opacity: 0.5;
    }

    80% {
        opacity: 0.3;
    }
}

#dText span.stars {
    animation: on_sky var(--period) ease-in-out forwards var(--duration);
    animation-play-state: running;
}

@keyframes on_sky {
    25% {
        padding-right: 40px;
    }

    75% {
        padding-right: -40px;
    }
}


svg.HaMavdil path {
    stroke-opacity: 0.5;
    stroke: fuchsia;
    stroke-linecap: round;
    stroke-width: 1px;
    fill: none;
    stroke-dasharray: 100 20 20;
    animation: dash 5s linear alternate 2;
}

@keyframes dash {
    to {
        stroke-dashoffset: 1600;
    }
}