html, body {
    margin: 		0;
    padding: 		0;
    display: 		flex;
    flex-direction: column;
    height: 		100%;
    font-family: 	"Lato", helvetica, sans-serif;
    font-size: 		13pt;
    line-height:    150%;
    background: 	#f0f0f0;
    font-weight:    300;
    overflow:       hidden;
}

code {
    font-family:    'Anonymous Pro', monospace;
    font-size:      11pt;
    line-height:    130%;
}

a {
    color:           #707070;
    text-decoration: underline;
    transition:      color .3s;
}

a:visited {
    color:           #808090;
}

a:hover {
    color:           #505070;
}

article footer {
    margin-top: auto;
}

body>nav {
    height: 	     32px;
    flex-basis:      32px;
    flex-grow:       0;
    flex-shrink:     0;
    margin: 		 0;
    padding:         0;
    display: 	     flex;
    background:      #111111;
    color: 	         #f0f0ff;
    flex-direction:  row;
}

body>nav>ul {
    display:        flex;
    list-style:     none;
    padding:        0;
    margin:         0;
    flex-direction: row;
    flex-grow:      1;
    padding-left:   32px;
    padding-right:  32px;
    align-items:    center;
}

body>nav a {
    color: 	         #f0f0ff;
    text-decoration: none;
}

body>nav a:hover {
    color: 	         #f0f0ff;
    text-decoration: none;
}

body>nav a:visited {
    color: 	         #f0f0ff;
    text-decoration: none;
}

body>nav>ul.sitenav {
    justify-content: flex-start;
    padding-right: 0px;
}

body>nav>ul.linknav {
    justify-content: flex-end;
    padding-left: 0px;
}

body>nav>ul>li {
    padding-left:  12px;
    padding-right: 12px;
    padding-top:   2px;
    padding-bottom: 2px;
    border-left:   1px solid white;
    display:       block;
    border-radius: 4px;

    transition: background .5s;
    transition-timing-function: ease-in-out;
}

body>nav>ul>li:hover {
    background: rgba(0, 64, 128, .7);
    transition: background .25s;
    transition-timing-function: ease-in-out;
}

body>article {
    display:        flex;
    flex-direction: column;
    flex-basis:     32px;
    flex-grow: 	    1;
    flex-shrink:    0;
    overflow:       auto;
    margin:         0;
    padding:        0;
    -webkit-overflow-scrolling: touch;
}

body>article>.body {
    padding-left:   350px;
    padding-right:  350px;
    padding-top:    32px;
    padding-bottom: 32px;
    transition:     padding 1s;
    flex-basis:     auto;
    flex-grow:      0;
    flex-shrink:    0;
    z-index:        200;
}

.body pre {
    margin-left:    16px;
    margin-right:   16px;
    padding:        4px;
    background:     #fefeff;
    border:         1px solid #90c0d0;
    border-radius:  4px;
}

.body img {
    margin-left:    auto;
    margin-right:   auto;
    width:          auto;
    padding:        4px;
    background:     #fefeff;
    border:         1px solid #90c0d0;
    border-radius:  4px;
    display:        block;
    text-align:     center;
}

.body pre code {
    border-radius:  4px;
    background:     #fafaff
}

p code {
    background:     #fafaff;
    color:          #600000;
    font-size:      85%;
    border:         1px solid #90c0d0;
    padding-left:   6px;
    padding-top:    2px;
    padding-bottom: 2px;
    padding-right:  6px;
}

body>article>header {
    font-weight:     400;
    margin:          0;
    padding:         0;
    background:      #e0e0e0;
    min-height:      300px;
    line-height:     110%;
    position:        relative;
    transition:      min-height .5s;
    transition-timing-function: ease-in-out;
}

body>article>header>div {
    margin:          0;
    padding:         0;
    min-height:      300px;
    display:         flex;
    flex-direction:  column;
    line-height:     110%;
    position:        absolute;
    width:           100%;
    z-index:         100;
    transition:      min-height .5s;
    transition-timing-function: ease-in-out;
}

body>article>header>div#logo-background {
    flex-direction:  row;
    align-items:     center;
    justify-content: center;
    background:      #f3e1d1;
}

body>article>header>div#logo-background * {
    max-width:       70%;
    margin-top:      8px;
    margin-bottom:   8px;
    max-height:      350px;
}

body>article>header>div>.title {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    flex-grow:       1;
    padding-left:    8px;
    padding-right:   8px;
}

body>article>header>div>.title>h1 {
    /*
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 0%, rgba(125,185,232,0) 100%);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 0%,rgba(125,185,232,0) 100%);
    */
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0) 80%);

    font-size:     40px;
    font-weight:   800;
    border-radius: 8px;
    line-height:   120%;
    text-shadow:   0px 2px 8px rgba(0,0,0,.6), 
                   0px 0px 2px rgba(0,0,0,.5);
    color:         #fff;
    display:       inline-block;
    margin:        0;
    padding:       0;
}

body>article>header>div>nav {
    display:         flex;
    flex-shrink:     0;
    flex-grow:       0;
    flex-basis:      auto;
    padding-top:     8px;
    padding-bottom:  16px;
    flex-direction:  row;
    justify-content: flex-end;
    margin-right:    32px;
    font-size:       10pt;
}

body>article>header>div>nav a,
body>article>header>div>nav a:hover,
body>article>header>div>nav a:visited {
    color:           rgba(240, 240, 255, 1);
    text-decoration: none;
}

body>article>header>div>nav>ul {
    list-style:      none;
    display:         flex;
    flex-direction:  row;
    justify-content: flex-start;
}

body>article>header>div>nav>ul>li {
    display:       block;
    color:         rgba(240, 240, 255, 1);
    background:    rgba(0, 0, 32, .2);
    padding:       4px 16px 4px 16px;
    border-radius: 12px;
    text-shadow:   0px 2px 4px rgba(0,0,0,.6), 
                   0px 0px 1px rgba(0,0,0,.5);
    margin-left:   3px;

    transition: background .35s;
    transition-timing-function: ease-in-out;
}

body>article>header>div>nav>ul>li:hover {
    background: rgba(0, 32, 64, .7);
    transition: background .15s;
    transition-timing-function: ease-in-out;
}

#title-background {
    position:   absolute;
    background: #c0c0e0;
    width:      100%;
    height:     300px;
    z-index:    1;
}

body>article>footer {
    background:  rgba(64,64,64,.8);
    flex-grow:   0;
    flex-shrink: 0;
    flex-basis:  32px;
    height:      32px;
}

#title-background {
    opacity: 0.3;
    transition: opacity 5s;
    transition-timing-function: ease-in-out;
}

header:hover #title-background {
    opacity: 0.99;
    transition: opacity 1s;
}

body>article>.articles {
    padding-left:   400px;
    padding-right:  400px;
    padding-top:    32px;
    padding-bottom: 32px;
    margin-top:     32px;
    transition:     padding 1s;
    flex-basis:     auto;
    flex-grow:      0;
    flex-shrink:    0;
    z-index:        200;
}

body>article>section#isso-thread {
    padding-left:   400px;
    padding-right:  400px;
    padding-top:    0px;
    padding-bottom: 32px;
    margin-top:     0px;
    flex-basis:     auto;
    flex-grow:      0;
    flex-shrink:    0;
    z-index:        200;
	border-top:     1px solid #d0d5e0;
}

.articles a {
    color:           inherit;
    text-decoration: none;
}

.articles>ul {
    display:        flex;
    flex-direction: column;
}

.articles>ul>li {
    display:        flex;
    flex-direction: column;
    border:         1px solid #dae0e0;
    border-radius:  4px;
    background:     #f0f0f0;
    margin-bottom:  8px;
    padding:        8px;
    box-shadow:     0px 1px 2px rgba(180,190,190,.6);
    transition:     background .25s;
}

.articles>ul>li .heading {
    display:        flex;
    flex-direction: row;
    background:     black;
    color:          #eaf0f0;
    padding-left:   8px;
    padding-right:  8px;
    padding-top:    2px;
    padding-bottom: 2px;
    margin-bottom:  16px;
}

.articles>ul>li .heading .date {
    margin-left: 12px;
}

.articles>ul>li:hover {
    background:     #eaeaea;
    transition:     background .5s;
}

.articles>ul>li .title {
    flex:           1 0 0;
    font-weight:    800;
    font-size:      120%;
}

.articles>ul>li .snippet {
    margin-left:    12px;
    padding-left:   8px;
    margin-right:   20px;
    padding-top:    4px;
    padding-bottom: 4px;
    border-left:    1px solid #c0d0d0;
}

.articles>ul>li .readmore {
    text-decoration:    underline;
    color:              #aab0b0;
    font-size:          80%;
    text-align:         right;
    margin-top:         8px;
}

.title-page {
    background: #eaf0f0
}

.mow {
    vertical-align: bottom;
    margin-top:     -74px;
    padding-left:   32px;
}

nav#pages, nav#article-nav {
    display:        flex;
    flex-direction: row;
    padding-left:   350px;
    padding-right:  350px;
    padding-top:    0px;
    padding-bottom: 64px;
    transition:     padding 1s;
    flex-basis:     auto;
    flex-grow:      0;
    flex-shrink:    0;
    z-index:        210;
}

nav#pages>* {
    flex: 1 0 0;
}

nav#article-nav>* {
    flex: 1 0 0;
}

nav#pages>#next, nav#article-nav>#next-article {
    text-align: right;
}

@media (max-width: 1700px) {
    nav#pages, nav#article-nav {
        padding-left:  256px;
        padding-right: 256px;
        transition:  padding .5s;
    }

    body>article>.body {
        padding-left:  256px;
        padding-right: 256px;
        transition:  padding .5s;
    }

    body>article>.articles {
        padding-left:  350px;
        padding-right: 350px;
        transition:  padding .5s;
    }

    body>article>section#isso-thread {
        padding-left:  350px;
        padding-right: 350px;
    }
}

@media (max-width: 1400px) {
    nav#pages, nav#article-nav {
        padding-left:  128px;
        padding-right: 128px;
        transition:  padding .5s;
    }

    body>article>.body {
        padding-left:  128px;
        padding-right: 128px;
        transition:  padding .5s;
    }

    body>article>.articles {
        padding-left:  150px;
        padding-right: 150px;
        transition:  padding .5s;
    }

    body>article>section#isso-thread {
        padding-left:  150px;
        padding-right: 150px;
    }
}

@media (max-width: 800px) {
    nav#pages, nav#article-nav {
        padding-left:  16px;
        padding-right: 16px;
        transition:  padding .5s;
    }

    body>article>.body {
        padding-left:  16px;
        padding-right: 16px;
        transition:  padding .5s;
    }

    body>article>.articles {
        padding-left:  16px;
        padding-right: 16px;
        transition:  padding .5s;
    }

    body>article>section#isso-thread {
        padding-left:  16px;
        padding-right: 16px;
    }

    body>article.title-page>.articles {
        padding-top:    16px;
        margin-top:     16px;
    }

    body>article.title-page>header {
        min-height:      150px;
    }

    body>article.title-page>header>div {
        min-height:      150px;
    }

    body>nav {
        font-size: 11pt;
    }
}