@import url( dark.css );
@import url( core.css );
@import url( typo.css );
@import url( menu.css );

html
{
    color: var( --color-text );
    background: var( --color-body );
}

a , h1 , h2 , h3 , h4 , h5 , h6
{
    color: var( --color-text-main );
}

a
{
    display: inline-block;
    position: relative;
}

a:after
{
    left: 0;
    right: 0;
    bottom: .15em;
    height: .15em;

    content: '';
    display: block;
    position: absolute;

    transition: 200ms ease all;
    background: rgba( var( --contrasts ) / .7 );
}

a:hover:after
{
    height: .25em;
    background: rgba( var( --contrasts ) / 1 );
}

pre
{
    height: auto;
    padding: 1em;

    overflow-x: auto;
    overflow-y: hidden;

    margin-left: -2.5em;
    margin-right: -2.5em;

    background: rgb( var( --baselines ) );
    counter-reset: pre-line;
}

pre > span ,
pre > code > span
{
    counter-increment: pre-line;
}


pre > span:before ,
pre > code > span:before
{
    width: 2em;
    float: left;
    content: counter( pre-line );
    display: block;
    opacity: .5;
}

pre , code
{
    color: rgba( var( --contrasts ) / .9 );
}

u , i , b , strong
{
    color: var( --color-text-main );
}

ul
{
    list-style-type: square;
}


::-webkit-scrollbar
{
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track
{
  background: rgba( var( --contrasts ) / calc( .5 * var( --intensity ) ) );
}

::-webkit-scrollbar-thumb
{
  background: rgba( var( --contrasts ) / var( --intensity ) );
}

::-webkit-scrollbar-thumb:hover
{
  background: rgba( var( --contrasts ) / calc( 5 * var( --intensity ) ));
}

/*UTILS*/

.wrap
{
    margin: 0 auto;
    max-width: 45em;
}

.padd
{
    padding: 2.5em;
}

/*ELEMS*/

.nav
{
    padding-bottom: 0;
}

.logo
{
    margin: 0 auto;
    display: block;
    max-width: 5em;
}

.logo:after
{
    clear: both;
    content: '';
    display: block;

    left: initial;
    right: initial;
    bottom: initial;
    height: initial;

    position: initial;
    background: initial;
}

.logo:hover:after
{
    height: initial;
}

.main-menu
{
    width: 100%;
    margin: 0 auto;
    margin-top: 2.5em;

    display: flex;

    border: 1px solid var( --outline );
    border-left: none;
    border-right: none;
}

.main-menu a:after
{
    left: initial;
    right: initial;
    bottom: initial;
    height: initial;

    content: initial;
    display: initial;
    position: initial;
    background: initial;
}

.main-menu > li
{
    flex: 1 1 0;
    display: table-cell;
    text-align: center;
    position: relative;
}

.main-menu > li.active > a
{
    font-weight: bold;
}

.main-menu > li:before
{
    height: 1px;

    content: '';
    display: block;

    left: 0;
    right: 0;
    bottom: -1px;
    position: absolute;

    background: linear-gradient( 90deg , #036e3900 0 , #036e39ff 50% , #036e3900 100% );

    opacity: 0;
    transition: 200ms ease opacity;
}

.main-menu > li:hover:before
{
    opacity: 1;
}

.main-menu > li.active:after
{
    width: .3em;
    height: .3em;

    left: 0;
    right: 0;
    bottom: -0.15em;
    margin: 0 auto;
    position: absolute;

    content: '';
    display: block;

    background: #ef4027;
    border-radius: 100%;

}

.main-menu > li > a
{
    width: 100%;
    height: 100%;
    display: block;
}

.tags
{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    list-style: none;
    font-size: .75em;
    text-transform: lowercase;
    margin-bottom: 1em;
}

.tags a
{
    display: block;
    border: 1px solid var( --outline );
    padding: 0 .5em;
}

.tags li
{
    margin-right: 1em;
}

/* PAGE */

.page_header::after
{
    width: 1em;
    height: 0;
    margin: 1em auto;

    content: '';
    display: block;

    border-bottom: 1px solid;
}

.page_header_title ,
.page_header_subtitle
{
    margin: 0;
    text-align: center;
}

.page_header_title
{
    font-variant: small-caps;
    text-transform: capitalize;
}

.page_header_subtitle
{
    font-style: italic;
}

.page_intro
{
    text-align: center;
    font-style: italic;
}

/*
.page_intro:first-letter
{
    float: left;
    font-size: 4em;
    line-height: 1;
    width: 4em;
    height: 4em;
    margin-right: .25em;
    color: var( --color-text-main );
    font-weight: bold;
    font-style: italic;
}
*/

.pagination
{
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.pagination li
{
    display: inline-block;
}

.pagination a
{
    width: 2em;
    height: 2em;
    display: block;
    line-height: 2em;
}

.pagination a:hover ,
.pagination a.active
{
    font-weight: bold;
}

.pagination a:after
{
    display: none;
}

/* POST LIST */

.post-list
{
    margin: 2.5em 0;
    padding: 0;
    list-style: none;
}

.post-list > li
{
    position: relative;
    border-bottom: 1px solid var( --outline );
}

.post-list > li:last-child
{
    border-bottom: none;
}

.post-list > li:before
{
    content: '✦';
    display: block;

    top: .25em;
    left: -2em;
    position: absolute;

    color: var(--color-text);
    transition: 200ms ease color;
}

.post-list > li:hover:before
{
    color: var(--color-text-main);
}

.post-list_item a
{
    display: block;
}

.post-list_item a:after
{
    display: none;
}

.post-list_item:after
{
    clear: both;
    content: '';
    display: block;
}

.post-list_item_link
{
    display: block;
    overflow: hidden;
}

.post-list_item_title
{
    float: left;
    margin: 0;
    font-size: 1.25em;
    line-height: 2em;
}

.post-list_item_subtitle
{
    clear: both;
    color: var( --color-text );
    opacity: .5;
    font-style: italic;
    margin-top: 0;
    line-height: 1;
}


.post-list_item_date
{
    float: right;
    font-style: italic;
    color: var(--color-text);
    font-size: 1em;
    line-height: 2.5em;
    transition: 200ms ease color;
}

.post-list_item:hover .post-list_item_date
{
    color: var( --color-text-main );
}

.post-list_item_intro
{
    clear: both;
    color: var( --color-text );
}

/* FOOTER */

.copy
{
    font-style: italic;
    text-align: center;
    padding-top: 0;
}