@charset "UTF-8";
/* CSS Document */

:root {
	--link: #D608dd;
	--background:#000;
	--background2:#131313;
	--headfontcolor:#db0000;
	--fontcolor:#fff;
	--titlebarcolor:#ffec13;
	--topiclinkcolor:#ffec13;
	
	--lineheight:1.6;
	
	--font: "alexa-std";
	--headfont:"six-hands-chalk";

	--header1:calc(3rem + 0.6vw);/* main titles */
	--header2:calc(2.5rem + 0.6vw);
	--header3:calc(2rem + 0.6vw);
	--header4:calc(1.5rem + 0.6vw);
	--header5:calc(1rem + 0.5vw); 
	--text:calc(1.3rem + 0.5vw);
	--subtext:calc(0.6rem + 0.5vw);
	}
	@media (prefers-color-scheme: light) {
		:root{
			--background:#FFF;
			--background2:#ddd;
			--headfontcolor: #000;
			--fontcolor:#000;
			--titlebarcolor:#000;
			--topiclinkcolor:#db0000;
		}
			  }	  

ul {
	list-style-type:none;}

i:hover, a:hover{
	color:var(--fontcolor);
	text-decoration-color: var(--fontcolor);
}
.title-bar-left i:hover{
	cursor:pointer;
}

i, ul,ol,.close-button,td,th, .menu a{
	color: var(--fontcolor);}

a, .top-bar .menu a:hover, .off-canvas a:hover{
	color: var(--fontcolor);
	text-decoration: underline;
	text-decoration-color: var(--link);}
h1{
	font-size: var(--header1);}

h2{
	font-size: var(--header2);}
	
h3{
	font-size: var(--header3);}

h4{
	font-size: var(--header4);}

h5{
	font-size: var(--header5);}

	
 p, ol{
	font-size: var(--text);}
.title-bar, .top-bar{
	font-size: var(--header5);
}	
.subtext{
	font-size: var(--subtext);}

body,td,th, .off-canvas, .top-bar, .top-bar ul,.off-canvas .menu-text,.title-bar{
	background-color: var(--background);}

h1,h2,h3,h4,h5,.off-canvas .menu-text{
	font-family: var(--headfont);
	color: var(--titlebarcolor);
	line-height:1.2}

.top-bar-right .menu a{
	font-style:italic;}


.top-bar, .title-bar {
	border-bottom: solid var(--fontcolor) 2px;}

span.title-bar-title a{
	font-family: var(--headfont);
	color: var(--titlebarcolor);
	text-decoration: none;}

.top-bar-left span.title-bar-title a, .top-bar-left span.title-bar-title a:hover,b{
	color: var(--titlebarcolor);}

.off-canvas a{
	color:var(--fontcolor);
	font-family: var(--font)
}

p, ol{
	color: var(--fontcolor);
	font-family: var(--font);
	line-height: var(--lineheight)}

.error-padding{
	padding: 5em;}

.top-bar a{
	font-family: var(--font);}

.off-canvas{
	width: 100%;}

.thumbnail img{
	width:100%;
	height:auto;}
	
.thumbnail, .thumbnail img{
	border-radius:15px;}

.left {
	float: left;
	margin-right: 1em;}

.right {
	float: right;
	margin-left: 1em;}

.article{
	max-height: 15rem;
	overflow: scroll;
	margin-top: 0.5rem;
	border-bottom: 1px solid var(--fontcolor);
	border-top: 1px solid var(--fontcolor);
}

 .article h3{
	margin-top: 1rem;
}
img {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
	pointer-events: none;
  }

header{
	height: 10rem;
	position:relative;
	margin: 0.5rem 0;
	border-bottom: 3px solid var(--fontcolor);}

	.video-title{
	padding-top: 1rem;
	}

#header-content{
	position:absolute;
	bottom:0;
	left:0;}

.top-bar-mobile{
	border-top: solid var(--fontcolor) 1px;}

.top-bar-mobile .top-bar-left{
	padding-left:0em;}

.top-bar-mobile .top-bar-left .menu a{
	font-style:italic;}

.grid-container.index{
	max-width:105rem;}

.foot-links{
	height:5rem;
	position:relative;
	border-bottom: 1px solid var(--fontcolor);
	margin-bottom:1.5em;}

.foot-links-content{
	position:absolute;
	bottom:0;
	left:0;}

@media screen and (min-width: 1500px){
	:root{
		--header1:5rem;
		--header2:4rem;
		--header3:3rem;
		--header4:2rem;
		--header5:1.4rem;
		--text:1.5rem;
		--subtext:1.0rem;}
	}