:root {
    --bg-color: #19242A;
    --fg-color: #E1E0E1;
    --link-color: #4381C7;
    --title-color: #B91C1B;
    --footer-color: #303843;
}

.social-list {
    list-style-type: none;
    display: flex;
    gap: .1em;
    justify-content: center;

    img {
        height: 3.5em;
        width: 3.5em;
        padding: .3em;
        border-radius: 5%;
        transition: 1s;
    }


}

@media (hover: hover) {
    header, main, footer {
        a:hover {
            filter: brightness(0.8);
        }

        a:has(> img) {
            transition: .5s;
        }

        a:has(> img):hover {
            filter: none;
            transition: .5s;
            scale: 102%;
        }
    }

    .social-list a:hover {
        filter: none;

        img {
            background: var(--link-color);
        }
    }
}