#content_socials {
    position: relative;
    width: 50vw;
    height: 25vh;
    margin: auto;
    margin-top: -8vh;
}
#socials_ul {
    list-style: none;

    padding: 0;
    margin: 0;

    position: relative;
    width: 100%;
    height: 100%;

    z-index: 20;
}
#socials_ul li {
    position: absolute;

    opacity: 0;

    border-radius: 50%;

    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);

    transition: opacity 15ms;
}
#socials_ul a {
    cursor: pointer;

    text-decoration: none;

    display: flex;
    flex-direction: column-reverse;
    align-items: center;

    color: var(--text-primary);
    mix-blend-mode: difference;

    font-size: 4rem;
}
#socials_ul a:hover > p {
    opacity: 1;
}
#socials_ul a i {
    transition: color 150ms;
}
#socials_ul a:hover > i {
    color: var(--socials-li-item-color);
}
#socials_ul li:nth-child(2):hover i {
    background: linear-gradient(45deg, #f58529, #d62976, #962fbf, #8a3ab9);
    -webkit-background-clip: text;
    color: transparent;
}

#socials_ul p {
    color: var(--text-secondary);

    font-size: 1.5rem;

    margin: 0;

    opacity: 0;
    transition: opacity 150ms;
}