.letter-drawing {
    position: relative;
    margin-bottom: 50px;
}

.letter-drawing svg {
    width: 99.95%;
    height: 80px;
    fill: none;
    stroke:#000;
    stroke-width: 0.1px;
    z-index: 0;
}

.letter-drawing::before {
    position: absolute;
    content: '';
    background: linear-gradient(90deg, #08f, #05c, midnightblue);
    mix-blend-mode: exclusion;
    width: 99.95%;
    height: 80px;
}



#ld1::before {
    mask: url('../med/img/svg/about_alpha.svg');
    -webkit-mask: url('../med/img/svg/about_alpha.svg');
    clip-path: polygon(0 0, var(--title-bg-about) 0, var(--title-bg-about) 100%, 0 100%);
    transition: 0.5s cubic-bezier(0.5,0,0,1)
}

#ld1 svg {
    stroke-dasharray: 50.23921203613281;
    stroke-dashoffset: 50.23921203613281;
}



#ld2::before {
    mask: url('../med/img/svg/skills_alpha.svg');
    -webkit-mask: url('../med/img/svg/skills_alpha.svg');
    clip-path: polygon(0 0, var(--title-bg-skills) 0, var(--title-bg-skills) 100%, 0 100%);
    transition: 0.5s cubic-bezier(0.5,0.5,0,1)
}

#ld2 svg {
    stroke-dasharray: 54.01080322265625;
    stroke-dashoffset: 54.01080322265625;
}



#ld3::before {
    mask: url('../med/img/svg/portfolio_alpha.svg');
    -webkit-mask: url('../med/img/svg/portfolio_alpha.svg');
    clip-path: polygon(0 0, var(--title-bg-portfolio) 0, var(--title-bg-portfolio) 100%, 0 100%);
    transition: 0.5s cubic-bezier(0.5,0.5,0,1)
}

#ld3 svg {
    stroke-dasharray: 51.07477951049805;
    stroke-dashoffset: 51.07477951049805;
}



#ld4::before {
    mask: url('../med/img/svg/feats_alpha.svg');
    -webkit-mask: url('../med/img/svg/feats_alpha.svg');
    clip-path: polygon(0 0, var(--title-bg-feats) 0, var(--title-bg-feats) 100%, 0 100%);
    transition: 0.5s cubic-bezier(0.5,0.5,0,1)
}

#ld4 svg {
    stroke-dasharray: 48.50068664550781;
    stroke-dashoffset: 48.50068664550781;
}



#ld5::before {
    mask: url('../med/img/svg/contact_alpha.svg');
    -webkit-mask: url('../med/img/svg/contact_alpha.svg');
    clip-path: polygon(0 0, var(--title-bg-contact) 0, var(--title-bg-contact) 100%, 0 100%);
    transition: 0.5s cubic-bezier(0.5,0.5,0,1)
}

#ld5 svg {
    stroke-dasharray: 48.483604431152344;
    stroke-dashoffset: 48.483604431152344;
}