:root {
    --primary: #655FDF;
    --primary--darker: #3A45EF;
    --bg: #16191E;
    --white: #FFF;
    --profile-bg: #23262D;
    --socials-bg: #343841;
    --socials-border: #42474D;
    --highlight-bg: #34393F;
    --text-bg: #E0E3EA;
    --text: #E6E9EB;
    --border-color: #42474D;
    --social-color: #6B6C6E;
    --active: #7774B5;
    --tab-bg: #32373D;
    --tabs-border: #42474D;
    --tab-width: 7rem;
    --tabs-gap: 0rem;
    --tab-radius: 0.1rem;
    --scrollbar-thumb: #e4e3f3;
    --scrollbar-bg: #F2F6F5;
}

.social-links {
    display: flex;
    margin: 0.5rem auto 1rem auto;
    width: 100%;
    /*
    justify-content: center;
    */
    list-style: none;
    gap: 1rem;
    flex-wrap: wrap;
}

.social-links a {
    background: var(--socials-bg);
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    width: 3rem;
    height: 3rem;
    /*
    align-items: center;
    justify-content: center;
    */
    gap: 0.5rem;
    border: 1px solid var(--border-color);
    color: var(--social-color);
    transition: all 0.3s;
}

.social-links a svg {
    width: 100%;
    height: 100%;
}

.social-links a:hover {
    border: 1px solid var(--active);
}

.social-links a:hover svg {
    stroke: var(--active);
}