/* areas */
div#main{
    margin: 0px auto 10px auto;
    display:flex;}
div#header{
    width:100%; position:relative; z-index:2; background-color:#272828}
div#logowrapper{
    display:inline-block; background-color: #272828; cursor: pointer}
header #logowrapper > div {
    display: inline-block; margin-left: 10px;
}
header div h1 a {
    font-size: 32px;
    line-height: 1em;
    font-weight: bold;
    color:white;
    text-align: left;
    margin: 0 0 0 8px;
}
header div h1 {
    text-align: left;
}
header div h1 a:hover {
    background: none!important;
}
header div h2 a {
    font-size: 1em;
    margin: .3em 0;
    color: #DDD;
}
header {
    width: 100%;
    height: 100px;
    position: relative;
    z-index: 2;
    background-color: #272828;
}
header #header {
    position: relative;
    z-index: 2;
    background-color: #272828;
    margin: auto;
}


div#contentwrapper{
    display:flex}
div#navwrapper{
    display:inline-block; position:absolute; z-index:2}
div#sidebar{
    display:flex;
    max-width: 275px;
    width:275px;
    padding: 0px 10px;}
div.content, div#content{
    display:block; padding: 5px}

#header_social {
    width: fit-content;
    right: 0px;
    position: absolute;
    display: inline-block;
    bottom: 10px;
}

#header_social > .social {
    height: 50px; padding: 2px 7px;
    margin: -5px -5px -3px -10px;
    text-align: right;
}

#footer_social > .social {
    float:right; display: block;
    padding-right: 20px;
}

#footer_social > .social > a > img {
    max-height: 48px;
    padding: 10px;
    display: inline-block;
    background-color: transparent;
}

#header_social > .social > a > img {
    margin: 0px 0px auto 0px;
    max-height: 38px;
    padding: 10px;
    display: inline-block;
    border-radius:10px;
    filter: grayscale(100%);
}

.social > a:hover {
    background: none!important;
    border: none!important;
}

#header_social > .social > a > img:hover {
    background-color: #3c3c3c!important;
    filter: none;
}

#small_footer {
    margin-top: 6px;
    line-height: 1.5em;
}

div#footerwrapper{
    border:0px; background-color: #272828; color: #ffffff;
    margin: 5px 0px 0px 0px; height: 65px; padding:8px 0px 10px 30px; }
p#small_footer, p#small_footer > a, p#small_footer > font, p#small_footer > font > a{
    color:#ffffff; font-size:12px}

@media screen and (max-width: 775px) {
    div.social {
        display:none;
    }
}

@media screen and (max-width:1023px) {
    div#main {
        width:99%;
    }
    div#contentwrapper,div#header{
        width:100%}
    div#sidebar{
        display:none; visibility: none}
    .content, div#content{
        width:100%}
    article {
        width: 98%!important;
    }
    div.thumbnailed_headline, .thumbnailed_headline > h1 {
        max-width: 95%;
    }
}

@media screen and (min-width:1024px) and (max-width:1199px) {
    div#main,div#header {
        width:1024px}
    div#contentwrapper{
        width:1024}
    .content, div#content{
        width:749px}
    article {
        width: 98%!important;
    }
    div.thumbnailed_headline, .thumbnailed_headline > h1 {
        max-width: 700px;
    }
}

@media screen and (min-width:1200px) and (max-width:1599px) {
    div#main,div#header {
        width:1200px}
    div#contentwrapper{
        width:1200px}
    .content, div#content{
        width:924px}
    div.thumbnailed_headline, .thumbnailed_headline > h1 {
        max-width: 850px;
    }
}

@media screen and (min-width:1600px) {
    div#main,div#header {
        width:1600px}
    div#contentwrapper{
        width:1600px}
    .content, div#content{
        width:1324px}
    div.thumbnailed_headline, .thumbnailed_headline > h1 {
        max-width: 1250px;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background: #171818;
    }
    div#content {
    }
    div#main {
    }
    h1,h2,h3,h4,h5 {
        color: white;
    }
    pre,code,p,b,i,strong,em,font,ul,li, div, label,small {
        color: #ebebeb;
    }
    #tipue_search_input {
        color: #ebebeb;
        border: 1px solid #474848!important;
        border-bottom: 2px solid #e0e0e0!important;
        background: #272828;
    }
    time {
        color: #c1c1c1;
    }
    ul.sidebar_list a, #toc ul a, .pagination_element > a, .readmore > a {
        color: white!important;
    }
    .sidebar_title {
        opacity: 0.7
    }
    #toc ul > li > ul > li > ul > li > a {
        color: #9ebaca!important;
    }
    #toc ul > li > ul > li > ul > li > ul > li > a {
        color: #819aa8!important;
    }
    .filter_checkbox:checked + .filter_label {
        background: #84c6ec!important;
    }
    .pagination_element_active > a {
        background-color: #636363;
    }
    .pagination {
        background: #272828;
    }
    a, .post-category > a{
        color: #84c6ec
    }
    th, td {
        color: white;
    }
}