@font-face {
    font-family: 'DejaVu Sans';
    src: url('../fonts/DejaVuSans.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'DejaVu Sans';
    src: url('../fonts/DejaVuSans-Bold.ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'DejaVu Sans Mono';
    src: url('../fonts/DejaVuSansMono.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'DejaVu Serif';
    src: url('../fonts/DejaVuSerif.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'DejaVu Serif';
    src: url('../fonts/DejaVuSerif-Bold.ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'DejaVu Serif';
    src: url('../fonts/DejaVuSerif-BoldItalic.ttf');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'DejaVu Serif';
    src: url('../fonts/DejaVuSerif-Italic.ttf');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'DejaVu Serif Condensed';
    src: url('../fonts/DejaVuSerifCondensed.ttf');
    font-weight: 400;
    font-style: normal;
}

body {
    font-size: 20px;
    --color-accent: #377653;
    --color-background-1: #323130;
    --color-background-1b: #3d3d3d;
    --color-background-2: #38495a;
    --color-text-accent-1: #6fb08c;
    --color-paper-bg: #ddcaa7;
    --color-paper-fg: #483b31;
    /* http://smoothshadows.com/#djEsMiw1LDAuMDgsMjQsMzIsMCwjMDMwNzEyLCNmM2Y0ZjYsI2ZmZmZmZiwy */
    --soft-shadow: 0px 1px 1px rgba(3, 7, 18, 0.08),
        0px 5px 4px rgba(3, 7, 18, 0.06),
        0px 12px 9px rgba(3, 7, 18, 0.05),
        0px 20px 15px rgba(3, 7, 18, 0.03),
        0px 32px 24px rgba(3, 7, 18, 0.02);
    background: var(--color-background-1);
    color: #ededed;
}

h1 {
    margin: 1rem 0;
    line-height: 1;
    font-family: 'DejaVu Serif';
    font-weight: 400;
}

aside {
    font-family: 'DejaVu Sans';
}

pre {
    font-family: 'DejaVu Serif Condensed', 'DejaVu Serif';
}

a {
    color: var(--color-text-accent-1);
    margin-left:auto;
}

.main {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto 1fr;
    max-width: 1650px;
    margin: 0 auto;
    width:fit-content;
    gap:1em;
}

.main > :not(.navwrap) {
	grid-column: 1;
}

.main > .navwrap{
    grid-column: 2;
    grid-row: 2 span / 4;
}

pre h2{
    margin:0;
}

nav {
    background: var(--color-background-1b);
    padding: 1em;
    display: flex;
    flex-direction: column;
    text-align: right;
    border-radius: 0.5em;
    box-shadow: var(--soft-shadow);
    background-image:linear-gradient(#2e2e2ec4,#3d3d3d86), url(/images/river_1.png);
    background-position: center,bottom right;
    background-repeat: repeat,no-repeat;
    background-size:cover;
    border-top: 1px solid rgba(165,165,165,0.1);
}

nav hr {
    width:100%;
}

nav a:hover, nav a:focus{
    filter:brightness(1.2);
}

nav h2{
    font-weight:normal;
    font-family: 'DejaVu Sans';
    margin:0;
    font-size:1.25rem;
}
nav h2:not(:first-child){
    margin-top:1rem;
}

@media screen and (max-width: 840px) {
    body, pre{
        font-size:16px;
    }
    h1{
        font-size:24px;
    }
    .main{
        display:flex;
        flex-direction:column;
        width:100%;
        box-sizing:border-box;
    }
    .main .navwrap{
        order:100;
    }
    nav{
        display:grid;
        grid-template-columns: auto 1fr;
        text-align:left;
        gap:9px 18px;
    }
    nav h2, nav a, nav h2:not(:first-child){
        display: inline-block;
        line-height: 1;
        font-size: 18px;
        margin: 0;
        margin-top:0;
    }
    nav h2{grid-column:1}
    nav a{grid-column:2}
}