/* footer */

:root {
  --footer-bg: rgb(226, 232, 240);
}

.dark {
  --footer-bg: rgb(200, 200, 200);
}

footer {
    background-color: var(--footer-bg);
    font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 1.2em;
}

footer .footer-menus-elements ul {
    padding-inline-start: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}

footer .footer-menus-elements li {
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

footer .footer-menus-elements li a {
    text-decoration: none;
    color: rgba(53, 67, 88, 0.685);
    font-weight: 500;
    transition: color 0.2s ease-in-out;
    width: 173px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

footer .footer-menus-elements li a:hover {
    text-decoration: underline;
    color: rgb(6, 8, 10);
}

footer h2 {
    font-size: 1em;
    color: rgba(55, 65, 81, 0.664);
    font-weight: 700;
}

.footer-menus {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 1250px;
}

.footer-menus div {
    margin: 5px 35px;
}

.footer-elements {
    padding: 50px 0;
}

.img-logo {
    width: 100px;
    filter: grayscale(100%);
    opacity: 50%;
    transition: filter, opacity 0.2s ease-in-out;
}

.img-logo-huge {
    width: 150px;
    filter: grayscale(100%);
    opacity: 50%;
    transition: filter, opacity 0.2s ease-in-out;
}

.logo-g-news {
    width: 150px;
    opacity: 80%;
}

.logo-earth-journalism {
    width: 80px;
    opacity: 80%;
}

a:hover .img-logo, a:hover .img-logo-huge {
    filter: none;
    opacity: 100%;
}

@media (max-width:576px) {

    .footer-menus {
        flex-direction: column;
        text-align: center;
        padding: 30px 0;
    }

    footer {
        height: auto;
    }

    .footer-menus div {
        margin: 10px auto;
    }
}

@media (max-width:1200px) {
    .footer-menus {
        display: flex;
    }
}