*{
    box-sizing:border-box 
}
html{
    line-height:1.6 
}
body{
    margin:0;
    font-family:sans-serif;
    background:#353b43;
    color:#afbac4 
}
h1,h2,h3,h4,h5,h6{
    color:#fff 
}
a{
    color:#57cc8a;
    text-decoration:none 
}
a:hover{
    color:#fff;
    transition:color .8s 
}
pre{
    overflow:auto 
}
.app-header{
    padding:2.5em;
    background:#242930;
    text-align:center 
}
.app-header-avatar{
    max-width:15rem;
    max-height:15rem;
    border-radius:100%;
    border:.5rem solid #57cc8a 
}
.app-container{
    padding:2.5rem 
}
.app-header-social{
    font-size:2em;
    color:#fff 
}
.app-header-social a{
    margin:0 .1em 
}
@media(min-width:940px){
    .app-header{
        position:fixed;
        top:0;
        left:0;
        width:20rem;
        min-height:100vh 
   }
    .app-container{
        max-width:65rem;
        margin-left:20rem 
   }
}
.error-404{
    text-align:center 
}
.error-404-title{
    text-transform:uppercase 
}
.icon{
    display:block-inline;
    width:1em;
    height:1em;
    vertical-align:-.125em 
}
.pagination{
    display:block;
    list-style:none;
    padding:0;
    font-size:.8em;
    text-align:center;
    margin:3em 0 
}
.page-item{
    display:inline-block 
}
.page-item .page-link{
    display:block;
    padding:.285em .8em 
}
.page-item.active .page-link{
    color:#fff;
    border-radius:2em;
    background:#57cc8a 
}
.post-title{
    color:#fff 
}
.post-content pre{
    border-left:.4em solid rgba(87,204,138,.8);
    padding-left:1em 
}
.post-meta{
    font-size:.8em 
}
.posts-list{
    padding:0 
}
.posts-list-item{
    list-style:none;
    border-bottom:1px dashed rgba(255,255,255,.3);
    padding:.4em 0 
}
.posts-list-item-description{
    display:block;
    font-size:.8em 
}
.tag{
    display:inline-block;
    margin-right:.2em;
    padding:0 .6em;
    font-size:.9em;
    border-radius:.2em;
    white-space:nowrap;
    background:rgba(255,255,255,.1);
    transition:background .8s 
}
.tag:hover{
    background:rgba(255,255,255,.3) 
}