.contact-social-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    
    width: 100%;
    max-width: 1100px;
    height: fit-content;
}
a, a:visited {
    color: var(--text);
    text-decoration: none;
}

.contact-social {
    margin: 12px;
    width: 500px;
    height: 64px;

    display: flex;

    border-radius: 32px;
    
    background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(to left, transparent, var(--accent), transparent) border-box;
    border-bottom: 1px solid var(--surface);
    border-top: 1px solid var(--surface);
    
    transition: 0.2s ease;
}
.contact-social:hover {
    scale: 1.02;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
}

.contact-social img,
.contact-social svg {
    width: 42px;
    height: 42px;
    margin-left: 18px;
    
    color: var(--accent);
    
    align-self: center;
}

.contact-social p {
    align-self: center;
    
    margin-left: 8px;
    font-size: 2em;
    font-family: "Outfit", sans-serif;
    font-weight: 300;
    font-style: normal;
}