.site-footer {
    text-align: center;
    background-color: var(--color-dark-200);
    color: var(--color-dark-500);
    min-height: 300px;

    .social-links {
        display: flex;
        justify-content: center;
        margin: 1rem 0;
        gap: 10px;
    }

    svg {
        fill: var(--color-primary);
    }

    a {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        background-color: var(--color-dark-500);
        border-radius: 50%;
        transition: 100ms ease-out 100ms;

        &:hover {
            background-color: var(--color-primary);
            transition: 100ms ease-in;
            transform: translateY(10%) scale(104%);

            svg {
                fill: var(--color-dark-500);
            }
        }
    }
}