@import url('variables.css');

#footer-elements {
    background-color: var(--color-links);
    color: #FFF;
}

footer h3 {
    font-size: 2rem;
    margin-bottom: 20px;
}

footer .flex-33:nth-child(2) {
    margin: 0 20px;
    flex: calc(33.33333333% - 40px);
    text-align: center;
}

footer .flex-50 {
    margin-bottom: 1rem;
}

footer .flex-50:nth-child(2n) {
    text-align: right;
}

footer button {
    border: 2px solid #FFF !important;
}

footer .footer-socials img {
    width: 30px;
    filter: invert(1);
    transition: filter .3s ease-in-out;
}

footer .footer-socials a {
    text-decoration: none;
    margin: 0 5px;
}

footer .footer-socials a:hover img {
    filter: invert(0);
}

.footer-socials {
    text-align: center;
}

.img-qr-code {
    width: 150px;
    margin-top: 40px;
}

@media screen and (max-width: 760px) {
    #footer-elements .display-flex.footer-container {
        flex-direction: column;
    }
}