@font-face {
    font-family: 'source-code-pro';
    src: url('/fonts/static/SourceCodePro-Regular.ttf') format('truetype');
    font-weight: 400;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0px;
    padding: 0px;
}

html {
    position: absolute;
    width: 100%;
}

#background {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 100vh;

    z-index: -2;

    margin: 0px;
    padding: 0px;

    background-image:
        linear-gradient(to right top, rgba(0, 0, 0, 0.4), rgba(171, 196, 243, 0.6)),
        url(img/bg.jpg);
    background-size: auto, cover;
    background-repeat: no-repeat, no-repeat;
}

body {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

#page-header {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    font-size: 150%;

    background-image: 
        linear-gradient(to right top, rgba(232, 234, 255, 0.5), rgba(220, 216, 243, 0.5)),
        url(img/paper.jpg);

    background-size: cover, cover;

    padding: 1ex;
    box-shadow: 0px 0em 0.2em 0.1em rgba(80,62,20,1); 

    background-color: white;

    font-weight: 400;
    font-family: 'source-code-pro', serif;

    color: rgba(40,20,30,1);

    min-height: 7ex;
}

.header-logo {
    height: 5ex;
}

.header-title {
    margin-left: 1em;
    font-size: 100%;
}

section {
    display: flex;
    flex-flow: column nowrap;
    margin: 1em;
    min-height: 30ex;

    font-weight: 300;
    font-family: 'source-code-pro', serif;
}

section > header {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    width: 20em;
    height: 2ex;
}

section > header > * {
    margin: 0px;
}

section > header > h4 {
    font-size: 80%;
}

body {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
}


article {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 1.5em;
    margin-top: 4.5em;
    margin-bottom: 4.5em;

    max-width: 60em;
    width: calc(100% - 3em);
    box-shadow: 0px 0em 0.2em 0.1em rgba(80,62,20,1); 

    height: auto;
    background-color: white;

    background-image: 
        linear-gradient(to right top, rgba(232, 234, 255, 0.5), rgba(220, 216, 243, 0.5)),
        url(img/paper.jpg);

    background-position: middle, -150px -150px;
    background-size: cover, cover;

    color: rgba(40,20,30,1)
}


#page-header > .nav-item {
    margin-left: auto;
    color: rgba(120, 10, 24, 1);
}

article > header {
    margin: 1em;
}