@font-face{ 
	font-family: 'Open Sans Light';
	src: url('../fonts/OpenSansLight.woff');
}

@font-face{ 
	font-family: 'Noto Mono Regular';
	src: url('../fonts/NotoMonoRegular.woff');
}


* {
    box-sizing: border-box;
}

body {
    background-color: #1a1510;
    color: #b8b5a8;
    font-family: 'Open Sans Light';
    padding: 0;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a:link {
    color: #63b5a4;
}

a:hover,
a:visited:hover {
    color: #fff;
    text-decoration: none;
}

a:visited {
    color: #a18038;
}

header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    width: 100%;
    background-color: #111;
    font-family: 'Noto Mono Regular';

    display: flex;
    justify-content: space-between;
}

header #title {
    padding: 1em;
}

header nav {
    display: flex;
}

header nav > a:link,
header nav > a:visited {
    color: #70763b;
    display: block;
    text-decoration: none;
    padding: 1em;
}

header nav > a:hover {
    color: #000;
    background-color: #70763b;
    text-decoration: none;
}

div.container {
    width: 100%;
    max-width: 1100px;
    padding: 0 2em;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

aside {
    width: 25%;
    min-width: 200px;
}

aside a:link,
aside a:visited {
    text-decoration: none;
}

aside h1,
aside h2,
aside h3 {
    color: #a24747;
    font-weight: normal;
    font-family: 'Noto Mono Regular';
    margin-top: 2em;
    font-size: 1.1em;
}

aside ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

aside ul > li {
    margin-bottom: 0.2em;
}

aside ul#tracks {
    font-size: 0.8em;
}

aside ul#tracks li {
    display: flex;
    margin-bottom: 0;
}

aside ul#tracks li p {
    margin: 0;
    padding: 0;
}

aside ul#tracks li div {
    margin-right: 1em;
    flex: 0 0 34px;
}

aside ul#tracks li img {
}

main {
    padding-right: 1em;
    width: 70%;
}

main h1,
main h2,
main h3,
main h4 {
    font-weight: normal;
    font-family: 'Noto Mono Regular';
    margin-top: 1em;
    color: #7e4b80;
}

main h1 {
    font-size: 1.8em;
    color: #70763b;
}

main h2 {
    margin-top: 2em;
}

main article.post {
    padding: 1em 0;
    border-bottom: 1px dashed #ce910c66;
}

main article.post > h2 > a:link {
    text-decoration: none;
}

main article.post > a.continue {
    display: block;
    text-align: right;
}

main div.highlight {
    padding: 0.5em 1.5em;
    background: #272822;
    color: #f8f8f2;
    margin: 1em;
}

section p {
    font-size: 1.15em;
    margin-top: 0;
    line-height: 1.4;
}

section p.details {
    color: #a24747;
}

footer {
    width: 100%;
    padding: 2em;
    margin: 5em 0 0 0;
    box-sizing: border-box;
    text-align: center;
    background-color: #111;
}

footer p {
    margin: auto;
    width: 30%;
}

@media only screen and (max-width: 768px) {
    body > div.container {
        flex-direction: column;
    }

    header {
        position: static;
    }

    header div.container {
        flex-direction: column-reverse;
    }

    header div#title,
    header nav {
        margin: auto;
    }

    header nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    main {
        width: 100%;
    }

    aside {
        width: 100%;
    }

    section p {
        font-size: 1em;
    }

    footer p {
        width: 75%;
    }
}