.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 {
    transform: scale(1.75);
    mask: url('../med/img/svg/about_he_alpha.svg');
    -webkit-mask: url('../med/img/svg/about_he_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 {
    transform: scale(1.75);
    stroke-dasharray: 65.55056762695312;
    stroke-dashoffset: 65.55056762695312;
}



#ld2::before {
    transform: scale(1.25);
    mask: url('../med/img/svg/skills_he_alpha.svg');
    -webkit-mask: url('../med/img/svg/skills_he_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 {
    transform: scale(1.25);
    stroke-dasharray: 64.06141662597656;
    stroke-dashoffset: 64.06141662597656;
}



#ld3::before {
    transform: scale(1.25);
    mask: url('../med/img/svg/portfolio_he_alpha.svg');
    -webkit-mask: url('../med/img/svg/portfolio_he_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 {
    transform: scale(1.25);
    stroke-dasharray: 65.53636169433594;
    stroke-dashoffset: 65.53636169433594;
}



#ld4::before {
    mask: url('../med/img/svg/feats_he_alpha.svg');
    -webkit-mask: url('../med/img/svg/feats_he_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: 81.67295837402344;
    stroke-dashoffset: 81.67295837402344;
}



#ld5::before {
    transform: scale(1.25);
    mask: url('../med/img/svg/contact_he_alpha.svg');
    -webkit-mask: url('../med/img/svg/contact_he_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 {
    transform: scale(1.25);
    stroke-dasharray: 81.67295837402344;
    stroke-dashoffset: 81.67295837402344;
}