header {
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--primary-border-radius);
    background-color: var(--primary-font);
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    height: var(--header-height);
    position: relative;
    background-size: var(--header-background-size);
    background-repeat: no-repeat;
    background-position: center;
    background-image: var(--header-ground-image);
    
    #header-logo {
        position: var(--header-logo-position);
        top: var(--header-logo-top);
        left: var(--header-logo-left);
        width: 130px;
    }

    #header-socials {
        position: absolute;
        top: var(--header-socials-top);
        right: var(--header-socials-right);
        display: flex;
        flex-direction: row;
        gap: var(--header-socials-gap);

        img {
            height: var(--header-socials-icon-size);
            width: var(--header-socials-icon-size);
        }
    }
}