@font-face {
    font-family: KirvyThin;
    /* src: url("fonts/hexgonstag.ttf") format("truetype"); */
    src: url("fonts/Kirvy-Thin.otf") ;
}
@font-face {
    font-family: hexgon-title;
    src: url("fonts/hexgonexpand.ttf") format("truetype");
}

@font-face {
    font-family: Asgalt;
    src: url("fonts/Asgalt-Regular.ttf") format("truetype");
}

#canvas,
#canvasbg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
}

#canvas {
    z-index: -1;
}
#canvasbg {
    z-index: -10;
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    filter: blur(3px);
    opacity: 0.6;
}

.wrapper {
    width: 800px;
    margin: 1em auto 0;
}

#header {
    padding-bottom: 1.2em;
}

body {
    background-color: #444;
    font-size: 16px;
    /* overflow: hidden; */
}

.pure-g.gutters {
    margin: 0 -0.5em;
}
.pure-g.gutters > [class *=pure-u] {
    box-sizing: border-box;
    padding: 0em 0.5em;
}

.pure-menu-full-width {
    /* display: inline-block; */
    overflow-x: hidden;
}

.pure-menu-item {
    height: auto;
    font-size: 14px;
}

.content,
.pure-menu {
    background-color: #fff;
    border-radius: 0.2em;
}

.pure-menu-heading {
    font-weight: 600;
    font-size: 20px;
    color: #f79c0b;
    text-shadow: -2px 3px 5px #ccc;
    font-family: 'KirvyThin', serif;
}

.content {
    padding: 1em 0.5em;
    min-height: 50vh;
}


.pure-menu-active>.pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {
    background-color: #e78410;
    color: #000;
}

.news-post {
    padding-bottom: 1.2em;
}
.news-header {
    padding: 0.4em 1em;
    background-color: #eee;
    border-radius: 1em;
}
.news-header .title {
    margin: 0;
    font-weight: 600;
    font-size: 32px;
    line-height: 28px;
    color: #f79c0b;
    /* color: #0bf742; */
    text-shadow: 0px 0px 3px #000, 2px -2px 5px #efa73c;
    font-family: 'Asgalt', serif;
    padding-bottom: 4px;
}
.news-header .date {
    float: right;
    padding: 0.4em;
    font-size: 12px;
    color: #444;
}
.news-header .author::before {
    content: 'Author: ';
    font-style: normal;
}

.news-header .author {
    font-size: 12px;
    font-style: italic;
}

.news-body {
    font-size: 14px;
}


#header .glitch {
    font-family: 'hexgon-title';
    font-size: 4em;
    color: #f79c0b;
    text-shadow: 0px 0px 15px #000;
}
#header .glitch + small {
    font-style: italic;
    color: #fff;
}


footer {
    text-align: center;
    margin-top: 2em;
    color: #999;
    font-size: 10px;
}

.menu-advert::before {
    content: 'Sponsor';
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 1px 4px;
    background-color: #ccc;
    border-bottom-right-radius: 0.3em;
    font-size: 10px;
    color: #666;
    z-index: -1;
}
.menu-advert {
    position: relative;
    margin-top: 1em;
    background-color: #fff;
    padding: 0.5em 0.4em;
    text-align: center;
    border-radius: 0.2em;
    z-index: 1;
}


.pure-button.pure-button-primary {
    background-color: #f79c0b;
    color: #13161b;
}