html, 
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Source Sans 3', sans-serif;
}

.container {
    width: 90%;
    max-width: 1085px;
    margin: 0 auto;
}
/* //////// FLEX CONTAINERS ///////////// */

header > .container,
nav ul {
    display: flex;
}

/* /////////////// HEADER /////////////// */

header > .container {
    align-items: center;
    gap: .19em;
    padding: 1.06em 0 1.18em 0;
}

.logo {
    width: 1.44763em;
}

.site-name {
    color: #0E0E0E;
    font-size: .847em;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    line-height: 1.082;
    letter-spacing: -.03em;
}

/* /////////////// NAVIGATION ///////////////// */

nav {
    margin-left: auto;
}

nav > ul {
    list-style-type: none;
    margin: 0;
}

nav a {
    text-decoration: none;
    margin-left: 1.5em;
    font-size: .75em;
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
}

@media (min-width: 67.8125rem) {
    
    header > .container {
        font-size: 1.47em;
    }

}