#header {
    width: var(--base-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding: 4px 0;
    font-size: 0.9rem;
}

#header-contact {
    text-align: right;
    margin-left: auto;
}
#header-contact a {
    color: var(--header-contact-link-color);
    margin-right: 10px;
    font-weight: normal;
}
#header-contact a:hover,
#header-contact a:focus {
    color: var(--header-contact-link-hover-color);
}
#header-contact img {
    filter: var(--header-icon-color);
    width: 1rem;
    transition: var(--base-transition);
    margin-bottom: -2px;
}
#contact-info {
    display: inline-block;
}
#social-icons {
    margin-left: 20px;
    display: inline-block;
}
#social-icons a:hover img,
#social-icons a:focus img {
    filter: var(--header-icon-hover-color)
}


@media screen and (max-width: 550px){
    #header {
        display: block;
    }
    #header-contact {
        margin-left: 0;
        display: flex;
        text-align: left;
    }
    #social-icons {
        margin-left: auto;
    }
}