/* corporate design */
:root {
    --color-primary: #004a8f;
    --color-secondary: #d1d4d4;
    --color-tertiary: #5959fb;
    --color-accent: #818484;
    --color-inverse: #ffffff;
    --container-width: 90%;
    --font: 'Roboto', sans-serif;
    --font-size-small: small;
    --font-size-large: x-large;
    --font-weight-thin: 300;
    --font-weight-medium: 600;
    --font-weight-thick: 700;
    --footer-offset: 1rem;
    --header-height: 75px;
    --link-decoration: none;
    --locale-padding: 20px;
    --locale-offset: -8px;
    --logo-width: 170px;
    --margin-center: 0 auto;
    --margin-center-spaced: 15px auto;
    --shadow: 2px 2px 2px 0px;
    --site-option-offset: 8px;
    --text-emphasis: uppercase;
    --title-offset: 1.3rem;
}
@media (min-width: 740px) {
    :root {
        --container-width: 720px;
    }
}
@media (min-width: 980px) {
    :root {
        --container-width: 960px;
    }
}
@media (min-width: 1180px) {
    :root {
        --container-width: 1140px;
    }
}


* {
    font-family: var(--font);
}
.bg-uni {
    background-color: var(--color-primary);
}
.text-uni {
    color: var(--color-primary);
}

/* header */
#header-container {
    align-items: center;
    background: url('assets/banner.png') no-repeat 200px 0 var(--color-secondary);
    display: flex;
    height: var(--header-height);
    justify-content: space-between;
    margin: var(--margin-center-spaced);
    width: var(--container-width);
}
#logo-container {
    height: var(--header-height);
    width: var(--logo-width);
}
#logo {
    height: 100%;
    width: 100%;
}
#locale-changer {
    color: var(--color-accent);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    padding-right: var(--locale-padding);
    text-decoration: var(--link-decoration);
    transform: translateY(var(--locale-offset));
}

/* title */
#title-container {
    margin: var(--margin-center-spaced);
    width: var(--container-width);
}
#title {
    border-left: 15px solid var(--color-primary);
    color: var(--color-primary);
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-thick);
    line-height: var(--title-offset);
    padding-left: var(--title-offset);
    text-transform: var(--text-emphasis);
}

/* footer */
#footer-container {
    background-color: var(--color-primary);
    box-sizing: border-box;
    margin: var(--margin-center);
    padding: var(--footer-offset);
    width: var(--container-width);
}
.footer-link {
    color: var(--color-inverse);
    display: block;
    font-weight: var(--font-weight-thin);
    font-size: var(--font-size-small);
    line-height: var(--footer-offset);
    text-decoration: var(--link-decoration);
    padding-left: var(--footer-offset);
}