.social a {
    text-decoration: none;
    display: inline-block;
    margin: 0 5px;
    vertical-align: top;
    opacity: 0.7;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    transition: opacity 0.5s ease;
}

header .social a,
main .social a { border: 1px solid var(--gray); }

footer .social a { border: 1px solid #FFF; }

.social a:hover { opacity: 1; }

.social a img {
    width: 16px;
    height: 16px;
    margin: 10px;
}