:root {
    --primary: #173f61;
    --background: white;

    --dark: #1a1b1d;
    --light: #cccccc;

    --padding: 32px;

    --header-height: max(min(20vh, 50vw), 120px);

    --content-width: 800px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--dark);

    margin: 0 0;
}

header {
    position: relative;
    height: var(--header-height);
    margin: calc(var(--padding)/2) 0 0 0;
    padding: 0px var(--padding);
}

.logo-container {
    position: absolute;

    width: calc(100% - 2 * var(--padding));
    max-width: var(--content-width);

    left: 50%;
    transform: translateX(-50%);
    height: 100%;

    padding: 0;
    z-index: 3;
}

main {
    width: calc(100% - 2 * var(--padding));
    max-width: var(--content-width);
    margin: var(--padding) auto;
    padding: 0;
}

.logo {
    position: relative;
    z-index: 4;
    height: 100%;
    left: 0;
}

.logo-bar {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

h1 {
    margin: 0;
    font-size: 48px;
}

h2 {
    margin: 0;
    font-size: 32px;
}

h3 {
    font-weight: normal;
    font-size: 24px;
}

.separator {
    height: 2px;
    width: 100%;
    background-color: var(--light);

    margin: calc(var(--padding) / 2) 0;
}

nav {
    position: absolute;
    z-index: 5;
    right: var(--padding);
    bottom: 0;
    display: flex;
    height: 25%;
    align-items: center;
}

nav a {
    color: var(--background);
    font-weight: normal;
    text-decoration: none;
    font-size: 20px;

    height: 100%;

    display: flex;
    align-items: center;
    padding: 16px;
}

nav a:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    nav {
        position: absolute;
        z-index: 5;
        right: var(--padding);
        top: 0;

        display: flex;
        height: 75%;
        align-items: center;
        flex-direction: column;
    }

    nav a {
        color: var(--dark);
        font-weight: bold;
        text-decoration: none;
        font-size: 20px;

        height: 20px;
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: flex-end;

        padding: 0;
        margin: 4px 0;
    }
}