@charset "UTF-8";

@font-face {
  font-family: 'Cringe';
  font-weight: bold;
  font-style: normal;
src: url('BNCringeSans-Black.eot');
src: url('BNCringeSans-Black.eot?#iefix') format('embedded-opentype'),
url('BNCringeSans-Black.woff2') format('woff2'),
url('BNCringeSans-Black.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Cringe';
  font-weight: normal;
  font-style: normal;
src: url('BNCringeSans-Medium.eot');
src: url('BNCringeSans-Medium.eot?#iefix') format('embedded-opentype'),
url('BNCringeSans-Medium.woff2') format('woff2'),
url('BNCringeSans-Medium.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Conspiracy';
  font-weight: normal;
  font-style: normal;
src: url('CONSB.eot');
src: url('CONSB.eot?#iefix') format('embedded-opentype'),
url('CONSB.woff2') format('woff2'),
url('CONSB.woff') format('woff');
  font-display: swap;
}

/* Reset
========================================================================== */

html {
  -ms-text-size-adjust: 100%; 
  -webkit-text-size-adjust: 100%;
}
a,input,button {touch-action: manipulation;}

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {margin:0; padding:0; }

[hidden],template {display: none;}

html {
  -ms-text-size-adjust: 100%; 
  -webkit-text-size-adjust: 100%; 
}

/* Clearfix
   ========================================================================== */
header::after,
footer::after,
nav ul::after,
nav ol::after,
.container::after,
.paginator::after {
  content: "";
  display: table;
  clear: both;
}

/* ==========================================================================
   Styling and layout for screen media (mobile first)
========================================================================== */
@media screen {

html>body {
  font-size: 16px;  
}
body {
  position: relative;
  text-rendering: auto;
  -webkit-tap-highlight-color: #f9f952;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  font-size: 100.01%;
  background: #232323 url(sl50x.jpg) no-repeat;
  color: #fff;
  padding-bottom: 2em;
}
.site-header, 
main,
.site-footer {
  display: block; 
  position: relative;
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a, a:visited {
  text-decoration: none;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  background: transparent; 
  color: #f9e552;
}
.front-page main a, 
.front-page main a:visited {
  color: #fff;
}
a:hover, a:active {
  outline: 0;
  text-decoration: underline; 
}
.skip-link {
    position: absolute;
    z-index: 2;
    top: 1px;
    left: 1px;
    padding: 0.25em 0.5em;
    transform: translateY(-5em);
    transition: transform 0.25s ease-in-out;
    background-color: white;
    color: #333333;
    font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  .skip-link:focus, .skip-link:active {
    transform: translateY(0);
  }
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
  font: normal 16px Conspiracy, serif;
}
h1,h2,h3,h4  {
  clear: both;  
}
h1 {
  font: bold 3.9em Cringe, sans-serif;
}
.site-header h1 {
  margin: 3rem 0 0;
}
h2 {
  font: bold 3.2em Cringe, sans-serif;
  margin: 0 0 .67em; padding-top: .5em;
}
h1.main, h2.main {font-size: 4em;
}
h3 {
  font: bold 2.4em Cringe, sans-serif;
  margin: 1em 0 0; 
}
h4 { 
  font: bold 1.6em Cringe, sans-serif;
  margin: 1em 0;
}
p {
  line-height: 1.8; 
  margin: 1em 0; 
  max-width: 1100px;
}
b {font: bolder 1.25em Cringe, sans-serif; text-transform: uppercase;
}
pre {font-family: Conspiracy, serif; line-height: 1.8;
}

/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.site-header {
  height: 243px;
  color: #fff;
  padding: 0 2%; 
}
.site-header h1 {
  display: inline-block; 
}
.site-header a {
  color: #fff;
}
main {
  margin: 0; 
  padding: 0 2% ; 
  padding-bottom: 2em; 
}
.site-footer {
  color: #aaa; 
  padding: 2%;
}
.site-footer p {
  margin:  .1em 0 0; 
}
.site-footer a, .site-footer nav {
  display: inline;
}
.site-footer a {line-height: 1.7;}

img {border: 0; max-width: 100%; }
figure, 
figure img {margin-left: 0; padding-left: 0; padding-bottom: .5rem;
}
nav img {position: absolute; top:5px;}
img.icon-search{right: 0; }
img.icon-feed  {right: 65px;}
img.icon-info {right: 125px; }
img.icon-home {right: 185px; }
nav img:hover {background: #f9e452; 
}
.search-page img.icon-search {right: 185px; }
.frontlist {
  font-size: 1.2em; }
.listmore {
  font-size: .9em;
  color: #aaa; 
  margin-bottom: 1em; 
}
.lt60 {color: #5290f9;}
.over061 {color: #9052f9;}
.over071 {color: #f952e4;}
.over086 {color: #f95266;}
.over098 {color: #f9bb52;}
.over110 {color: #bbf952;}
.over133 {color: #52f966;}

.front-page p.disclaimer {margin-bottom: 3rem; }
.disclaimer span {color: #aaa; }
.notice, #cpreview {color: #9052f9;}

.audiodwnld {margin: 2em 0; hight: 2em; padding-bottom: 2em;  display:block;
}
audio {display: block; 
}
audio:not([controls]) {display: none; height: 0;
}
.download {display: inline-block; margin-top: 5px; margin-right: 5px;
}

#comments-head h1 {font-size: 3.2em;}
article.comments-author {background: #000; padding: .5em;}
#txpCommentInputForm input,
#txpCommentInputForm textarea {
  font: normal 1em Cringe, sans-serif;
  border-radius: .33em; max-width: 320px;}
  
.gohome, .gotop {position: fixed; bottom: 1em; }
.gotop {right: 10px;}
.gohome{right: 65px; 
}
} 
/* End styles for all */
/* Font size and bg for larger screens */

@media only screen and (min-width: 31rem) {
html>body {
  font-size: 18px;
  background: #232323 url(sl60x.jpg) no-repeat;
}
h1 {font-size: 4.8em;
}
.site-header {height: 252px;}
}
@media only screen and (min-width: 36rem) {
html>body {
  font-size: 20px;
  background: #232323 url(sl74x.jpg) no-repeat;
}
.site-header {height: 260px;}
}
@media only screen and (min-width: 46rem) {
html>body {
  font-size: 24px;
  background: #232323 url(sl100x.jpg) no-repeat;
}
.site-header {height: 275px;}
}
@media only screen and (min-width: 62rem) {
html>body {
  font-size: 28px; 
  background: #232323 url(sl170x.jpg) no-repeat;
}
.site-header {height: 292px;}
}
@media only screen and (min-width: 85rem) {
html>body {
  font-size: 32px;
  background: #232323 url(sl240x.jpg) repeat-x;
}
.site-header {height: 310px;}
}