.Footer {
    position: relative;
    background: var(--color-darkest);
    padding: var(--padding-default);
    z-index: 100;

    & h4 {
        color: var(--color-lightest);
        text-align: center;
        margin-bottom: var(--padding-default);
    }

    & .bottom {
        display: flex;
        justify-content: center;
        color: var(--color-light);
    }

    & .copy {
        font-size: var(--font-size-xs);
        color: var(--color-light);
        margin-top: var(--padding-default);
        text-align: center;

        & a {
            color: var(--color-main);
            text-decoration: none;
        }
    }

    & .socials {
        font-size: var(--font-size-xl);
        justify-content: center;
        margin-bottom: var(--padding-xl);
    }

    & .data-links {
        justify-content: flex-end;
        font-size: var(--font-size-s);
    }

    & ul {
        list-style: none;
        display: flex;
        align-items: center;
        gap: var(--padding-default);

        & a {
            color: var(--color-lightest);
            text-decoration: none;
        }
    }
}