@font-face {
	font-family: 'roboto light';
	src: 
		local('roboto light'),
		url('/css/fonts/roboto-light.ttf') 
		format('truetype');
}

@font-face {
	font-family: 'roboto regular';
	src: 
		local('roboto regular'),
		url('/css/fonts/roboto-regular.ttf') 
		format('truetype');
}

* {
    padding: 0;
    margin: 0;
}

html {
    font-family: 'roboto light', serif;
    font-size: 16px;
}

body {
    background-color: #2f4f4f;
    color: white;
}

body > * {
    width: 100%;
    max-width: 980px;

    margin: 0 auto;
}

body > header {
    background-color: white;

    padding: 1em;

    display: grid;

    grid-template-columns: 300px auto;

    box-sizing: border-box;
    min-height: fit-content;
}

body > header > img {
    width: 300px;
}

body > header > nav {
    text-align: right;

    padding: 0.5em 0;
}

body > header > nav > a {
    text-decoration: none;
    text-transform: uppercase;

    font-family: sans-serif;
    font-weight: normal;

    color: #666666;

    display: inline-block;

    padding: 0.5em 1em;

    border-right: 0.2em solid orange;
}

body > header > nav > a:last-of-type {
    border-right: none;
}

h1, h2 {
    margin: 1em 0;
    color: orange;
    font-family: 'roboto medium', sans-serif;
}

p {
    line-height: 1.5em;
    margin: 1em 0;
}