#dText.Freha
{
    text-align: center;
    direction: ltr;
    height: 100vmin;
}


#dText.freha_sand
{
    direction: rtl;
    animation: grow  linear 20s;
    animation-delay:  0;
}

@keyframes grow {
    from{
        padding-top:120vh;
    }
    to {
        padding-top:0;
    }
}

#dText.freha_race
{
    direction: rtl;
    animation: wisher calc(var(--period) * 2.1) linear 10;
    animation-delay:  0;
}

@keyframes wisher {
    25% {
    transform: rotate(90deg);
  }
  75% {
    transform: rotate(-90deg);
  }
}


#dText.Freha span
{
    position: relative;
    animation: flowers  var(--period) ease-in-out forwards var(--duration);
    animation-delay: 2s, 20s;
}


@keyframes flowers{
    25%{
        margin-left: calc( -1 * var(--marg));
    }
    75%{
        margin-left: var(--marg);
    }
}
  
#dText.Freha span:before {
    content: '\a';
    white-space: pre;
}

#dLines.Freha path {
    stroke-opacity: 0.5;
    stroke: var(--bcolor);
    stroke-linecap: round;
    stroke-width: 1px;
    fill: none;
    stroke-dasharray: 10 45;
}