::-webkit-scrollbar {
    width: 5px;
    
}
::-webkit-scrollbar-thumb {
    background: #1E1E1E;
    border-radius: 5px;
}
::-webkit-scrollbar-track {
    background: #FCFCF9;
}
::selection {
    background: #1E1E1E;
    color: #FCFCF9;
}




.my-class {
    text-decoration: none;
    transition: opacity 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
     transition: color  300ms cubic-bezier(0.51, 0.92, 0.24, 1);
    width: max-content !important;

}
.my-class::after {
    --scale: 0;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 1px;
    background: #1E1E1E;
    transform: scaleX(var(--scale));
    transform-origin: var(--x) 50%;
    transition: transform 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
}
.my-class:hover {
    opacity: 1;
}
.my-class:hover::after {
    --scale: 1;
}

.my-class1 {
    text-decoration: none;
    transition: opacity 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
    width: max-content !important;
      color: inherit;
      
}
.my-class1::after {
    --scale: 0;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 1px;
    background: #FCFCF9;
    transform: scaleX(var(--scale));
    transform-origin: var(--x) 50%;
    transition: transform 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
    pointer-events: none;
}
.my-class1:hover {
    opacity: 1;
    color: #FCFCF9 !important
}
.my-class1:hover::after {
    --scale: 1;
}
.my-class1[data-elem-type="text"] a {
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    /* цвет ссылки до наведения */
    color: #848484 !important;
     
     
}

.my-class1[data-elem-type="text"] a:hover {
    /* цвет ссылки после наведения */
    color: #FCFCF9 !important;

}


.my-class2 {
    text-decoration: none;
    transition: opacity 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
    width: max-content !important;
      color: inherit;
      
}
.my-class2::after {
    --scale: 0;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 1px;
    background: #FCFCF9;
    transform: scaleX(var(--scale));
    transform-origin: var(--x) 50%;
    transition: transform 300ms cubic-bezier(0.51, 0.92, 0.24, 1);
    pointer-events: none;
}
.my-class2:hover {
    opacity: 1;
    color: #FCFCF9 !important
}
.my-class2:hover::after {
    --scale: 1;
}
.my-class2[data-elem-type="text"] a {
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    /* цвет ссылки до наведения */
    color: #FCFCF9 !important;
     
     
}

.my-class2data-elem-type="text"] a:hover {
    /* цвет ссылки после наведения */
    color: #FCFCF9 !important;

}