:root {
    --sans-font: Roboto, "Helvetica Neue", sans-serif;
    --mono-font: "Ubuntu Mono", monospace;

    /* Body font size. */
    --base-fontsize: 1.5rem;

    /* Major third scale progression - see https://type-scale.com/ */
    --header-scale: 1.25;

    /* Line height is set to the "Golden ratio" for optimal legibility */
    --line-height: 1.618;

    /* Default (light) theme */
    --bg: #ffffff;
    --accent-bg: #F5F7FF;
    --text: #212121;
    --text-light: #585858;
    --border: #D8DAE1;
    --accent: #0D47A1;
    --accent-light: #90CAF9;
    --code: #D81B60;
    --preformatted: #444;
    --marked: #FFDD33;
    --disabled: #EFEFEF;
}

html {
    /* Set the font globally */
    font-family: var(--mono-font);
}

body {
    color: var(--text);
    background: var(--bg);
    font-size: var(--base-fontsize);
    line-height: var(--line-height);
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    flex: 1;
    margin: 0 auto;
    max-width: 65%;
    padding: 0 .5rem;
    overflow-x: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
}

header,
nav,
main,
footer {
    padding: 2px calc((100% - 800px) / 2) 0;
}

main {
    margin-top: 54px;
    margin-bottom: 54px;
    min-height: calc(100vh - 345px);
    overflow: auto;
}

h1 {
    font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale) * var(--header-scale));
    margin-top: calc(var(--line-height) * 1.5rem);
}

h2 {
    font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale));
    margin-top: calc(var(--line-height) * 1.5rem);
}

h3 {
    font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale));
    margin-top: calc(var(--line-height) * 1.5rem);
}

a {
    color: #3176cb;
    text-decoration: none;
}

a:hover {
    color: #19549c;
    text-decoration: underline;
}

nav {
    border-bottom: 1px solid #E4E5E7;
    padding-top: 35px;
    padding-bottom: 15px;
    height: 60px;
}

nav a {
    margin-right: 1.5em;
    display: inline-block;
}

#nav-left {
    width: 35%;
    text-align: left;
    float: left;
}

#nav-right {
    width: 64%;
    text-align: right;
    float: right;
}