@import url("styles.css");

footer {
    background-color: var(--color-white);
    font-family: var(--font-lato);
    color: var(--color-black);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
}

.footer_left {
    flex: 1;
    text-align: left;
}

.footer_left .socials {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

.footer_right {
    flex: 1;
    text-align: right;
}

footer .copyright,
footer .developer,
footer .developer a {
    font-size: 1.2rem;
}

/*********** FOOTER RESPONSIVENESS *************/
@media (max-width: 576px) {
    footer {
        flex-direction: column; /* Change to column layout for mobile */
        text-align: center; /* Center text for mobile */
    }

    .footer_left,
    .footer_right {
        flex: initial; /* Reset flex to default */
    }

    .footer_left,
    .footer_right,
    footer .copyright,
    footer .developer,
    footer .developer a {
        text-align: center; /* Center text for mobile */
        margin: 0.5rem 0; /* Add some spacing between elements for mobile */
    }

    .footer_left .socials {
        justify-content: center; /* Center social icons horizontally for mobile */
    }

    footer .copyright,
    footer .developer,
    footer .developer a {
        font-size: 1rem; /* Reduce font size for mobile */
    }
}