.article-bit-top, .article-bit-bottom {
    background: url(../img/article-bg-top.png) no-repeat;
    width: 786px;
    min-height: 32px;
}

.article-bit-bottom {
    background: url(../img/article-bg-bottom.png) no-repeat;
}

.border-bg {
    --b: #4B4B4B;
    --all: 1.5%;
    --border:4px;
    border: var(--border) solid var(--b);
    background:
        linear-gradient(  45deg, var(--b) 0 calc(var(--bottom-left,var(--all)) + 5px) ,transparent 0) bottom left /50% 50%,
        linear-gradient( -45deg, var(--b) 0 calc(var(--bottom-right,var(--all)) + 5px),transparent 0) bottom right/50% 50%,
        linear-gradient( 135deg, var(--b) 0 calc(var(--top-left,var(--all)) + 5px)    ,transparent 0) top left    /50% 50%,
        linear-gradient(-135deg, var(--b) 0 calc(var(--top-right,var(--all)) + 5px)   ,transparent 0) top right   /50% 50%,
        #2A2A2A;
    background-origin:border-box;
    background-repeat:no-repeat;
    -webkit-mask:
        linear-gradient(  45deg, transparent 0 var(--bottom-left,var(--all)) ,#fff 0) bottom left,
        linear-gradient( -45deg, transparent 0 var(--bottom-right,var(--all)),#fff 0) bottom right,
        linear-gradient( 135deg, transparent 0 var(--top-left,var(--all))    ,#fff 0) top left,
        linear-gradient(-135deg, transparent 0 var(--top-right,var(--all))   ,#fff 0) top right;
    -webkit-mask-size:50.5% 50.5%;
    -webkit-mask-repeat:no-repeat;
}

@keyframes slide-in-from-top {
    from { margin-top: -90px }
    to { margin-top: calc( var(--header-height) - 10px ) }
}

header {
    animation: slide-in-from-top;
    animation-timing-function:cubic-bezier(0.23, 1, 0.320, 1);
    animation-duration: .5s;

    z-index: 100;
}

.title-header {
    position: relative;
    width: 100%;
}

.title-header #header {
    position: absolute;
    top: 110px;
    z-index: 1;
    --regen-border-size: 2px;
    --border-color: rgb(87, 133, 149);

    transition: 0.2s;

    font-family: 'Regen';
    font-weight: 300;
    color: #fff;
    font-size: 3em;
    margin: 0;
    text-shadow:
        0px var(--regen-border-size) var(--border-color),
        var(--regen-border-size) var(--regen-border-size) var(--border-color),
        var(--regen-border-size) 0px var(--border-color),
        var(--regen-border-size) calc(var(--regen-border-size)*-1) var(--border-color),
        calc(var(--regen-border-size)*-1) var(--regen-border-size) var(--border-color),
        calc(var(--regen-border-size)*-1) calc(var(--regen-border-size)*-1) var(--border-color)
    ;
}