/* This is the Post Stylesheet */

/***********************************************************
 ** Element List for Reference:
 * 
 * #header -> site header section
 * #content-title-area -> Title,Date,Author,Article
 * #post-meta -> Author, date, category, tags (inside #content-title-area)
 * #feat-img -> Featured image div
 * #content -> site body content section
 * #footer -> site footer section
 * #qlin -> link in quote section
 * #quotespot -> quote sections in posts
 *
 ***********************************************************/

/*@font-face {
	font-family: Press Start 2P;
	src: url('/wp-content/fonts/Press_Start_2P/PressStart2P-Regular.ttf');
}

@font-face {
	font-family: Poppins;
	src: url('/wp-content/fonts/Poppins/Poppins-Light.ttf');
}*/

/************************
 *** Sizes and Positioning 
 ************************/
p {
	overflow-wrap: anywhere;
	word-break: break-all;
}

html {
	width: 100%;
	height: 100%;
}
 
body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;

	background-color: black;
}

audio {
	width: 100%;
}

#contact-form-btn-wrapper {
	padding: 0 25%;
}
#contact-form-btn {
	/*font-family: 'Press Start 2P', Courier, monospace;*/
	font-family: 'mono';
	font-size: 100%;
	color: white;
	background-color: black;
	width: 50%;
	height: 3em;
	border: white solid .15em;
}
#contact-form-btn:hover {
	color: gold;
	border: gold solid .15em;
	cursor: pointer;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 6em; /* Place the button .2em from the bottom of the page */
  right: .6em; /* Place the button .2em from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: 2px dashed white;
  outline: none; /* Remove outline */
  background-color: rgba(0, 0, 0, .7); 
  color: white; 
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: .5em .4em;
  font-size: 18px; 
}
#myBtn:hover {
  background-color: gold;
}

article {
	padding: 0;
	margin: 10em 0 0 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;

	background-color: black;
}
article a {
	color: gold;
	width: 100%;
}
article #content .side-grid-elem a:hover {text-decoration: none;}

#header {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;	

	background-color: black;

	color: white;

	padding-left: 0em; 
	padding-right: 0em;	
}
	#header a {
		height: 100%;
		color: white;
		text-decoration: none;
	}
	#header-logo-div {
		flex-basis: 60%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		height: 100%;
		padding-top: 2%;
	}
	#header-menu-div {
		flex-basis: 40%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		height: 100%;
		padding-top: 2%;
	}
	#header-logo-home {
		margin-top: 8%;
		margin-bottom: 5%;
		margin-left: 10%;
		width: 80%;
		height: 50%;
	}
	#header-menu-img {
		margin-top: 1em;
		margin-bottom: 1em;
		margin-left: .8em;
		margin-right: 40%;
		height: 50%;
	}
	#header-twitter, #header-tumblr, #header-spotify, #header-pinterest, #header-instagram, #header-facebook {
		width: 5%;
		height: auto;
	}	
 
#content-title-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	background-color: rgba(0,0,0,0);
	width: 100%;

	/*background-image: url('/wp-content/icons/working-circuit-strip-lv-100.gif');*/
	background-repeat: no-repeat;
	background-size: cover;

	/*box-shadow: 0 0 1em 1em black inset;*/
	margin-bottom: .4em;
	padding: 0;

	color: white;
	text-align: center;
}
#content-title-area a, #content-title-area .post-meta {
	color: white;
	text-decoration: none;
	padding: 0 10px 0 0;
	text-shadow: 0px 0px 2px white;
}
#categories {
	padding-bottom: 20px;
}
body #content-title-area #tags {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	position: inherit;
	flex-wrap: wrap;
	padding-bottom: 40px;
}
#content-title-area div {
	display: flex;
	flex-direction: column;
	align-items: center;

	width: 70%;
}
#content-title-area .post-meta {
	padding-bottom: 20px;
}

#feat-img {
	width: 100%;
}
.featured-img-div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	height: 25em;
	overflow: hidden;
}

#body-tabcontents {
	text-align: center;
	border: 2px dashed white;
	margin: 0 0 2em 0;
	padding: 1em;
	width: 60%;
}
#body-tabcontents a {
	text-decoration: none;
}
.body-tabcontent-title{
	color: white;
}
#body-tabcontents a h3:hover {
	color: gold;
}
#body-tabcontents .body-contents {
	color: white;
	word-wrap: break-word;
}

html body article #content #editorguy {
	float: right;
	margin: .2em 0em 0em .2em;
	width: 49%;
}

#content {
	/*min-height: 800px;*/
	width: 90%;
	background-color: black;
	color: white;	
}

#content pre {
	width: 100%;
	font-size: 150%;
	margin: 1em auto;
	white-space: pre-wrap;
	overflow-x: auto;
}
pre pre {
	font-size: inherit;
}

#content a:hover {
	text-decoration: underline;
}

#content img, #content p {
	width: 100%;
	height: auto;
}

#content input[type=text], #content input[type=submit] {
	background-color: black;
	color: white;
	/*font-family: 'Press Start 2P', Courier, monospace;*/
	font-family: 'mono';
	font-size: 100%;
	border: white solid .15em;
	width: 100%;
}

#content input[type=submit]:hover {
	color: gold;
	cursor: pointer;
}

#content textarea {
	background-color: black;
	color: white;
	/*font-family: 'Press Start 2P', Courier, monospace;*/
	font-family: 'mono';
	font-size: 20px;
	border: white solid .15em;
}

#content .text-art-lg {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	/*justify-content: center;*/
	width: 100%;
	/*align-content: center;*/
	margin: auto;
	height: auto;
	overflow: hidden;
}
#content .text-art-md {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	/*justify-content: center;*/
	width: 100%;
	/*align-content: center;*/
	margin: auto;
}
#content .text-art-sm {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	/*justify-content: center;*/
	width: 100%;
	/*align-content: center;*/
	margin: auto;
}

#content .text-art-lg pre {
	width: 100%;
	/*line-height: 1%;*/
	font-size: 60%;
	margin: auto;
}
#content .text-art-md pre {
	width: 100%;
	/*line-height: 1%;*/
	font-size: 60%;
	margin: auto;
}
#content .text-art-sm pre {
	width: 100%;
	/*line-height: 1%;*/
	font-size: 60%;
	margin: auto;
}

#qlin {
	color: #ffadbc;
}

.externalpics {
	width: 100%;
}

.afdisplay-nonbod {
	color: white;	
	text-align: center;
	border: 2px dashed white;
	padding: 1em;
}

#atContainer-91ea405f7cd081db49214ce42fbc42ff a img {
	width: 100%;
	height: auto;
}

#quotespot, .quotespot {
	background-color: gold; 
  	padding: 1em;
  	margin-bottom: .5em;
	overflow-wrap: break-word;
}

#quotespot h3, #quotespot a, .quotespot h3, .quotespot a {
  	padding-top: .5em;
	text-align: center;
  	margin-bottom: .5em;
	
	color: black;
	text-decoration: none;
}

html body article #content #quotespot a:hover, html body article #content .quotespot a:hover {
	color: white;
}

.yt-img, .kick-img, .sndcld-img, .band-img {
	z-index: .5;
	position: relative;
}

.sndcld-img, .band-img {height: 20em !important;}

.yt-img:hover, .kick-img:hover, .sndcld-img:hover, .band-img:hover {cursor: pointer}

.yt-img-container, .kick-img-container, .sndcld-img-container, .band-img-container {position: relative}

.yt-img-overlay, .kick-img-overlay, .sndcld-img-overlay, .band-img-overlay {
	z-index: 1;
	position: absolute;
	top: 0%;
	width: 100%;
	height: 100%;
	background-image: url('/wp-content/icons/yt-overlay.gif');
	background-size: 100% 100%;
	background-position center;
	opacity: .8;
	pointer-events: none;
}
/*
#side-suggestions {
	display: grid;
	grid-template-columns: auto;

	width: 100%;
	background-color: black;
	color: white;	
}
#side-subscribe {
	background-image: url('/wp-content/icons/underlay.webp');
	background-position center;
	text-align: center;
	padding-top: 10%;
	padding-bottom: 10%;
	border: solid black .7em;
}
#side-subscribe a h1 {
	font-size: 200%;	
}
#side-subscribe a {
	text-decoration: none;
	color: white;
}
*/
#body-subscribe, #display-zone {
	background-position center;
	text-align: center;
	padding-top: 1%;
	padding-bottom: 1%;
	margin-bottom: 5px;
	border: 0;
	width: 100%;
}

#body-subscribe a h1, #display-zone a h1 {
	font-size: 200%;	
}
#content #body-subscribe a, #content #display-zone a {
	text-decoration: none;
	color: white;
}
#content #body-subscribe a:hover, #content #display-zone a:hover {
	text-decoration: none;
	color: gold;
}
.afctadisplay {
	display: none;
}

.side-gridflex {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;

	/*border-bottom: .3em solid black;*/

	height: 10em;
	width: 100%;
}
.sp {
	background-size: 150%;
	background-position: center;
	width: 100%;
}
.side-gridtop {
	height: 40em;

	background-size: 100% 100%;
	background-position: center;
	width: 100%;	
}
.side-grid-elem {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 1;
	width: 100%;

	text-align: center;
	background-position: center;
	border-bottom: black solid .3em;
	/*border-right: black solid .7em;
	border-left: black solid .7em;*/
	background-size: cover;

	/*box-shadow: 0 0 2em .7em black inset;*/
}

.side-grid-elem p {
	font-size: .8em;
	/*background-color: rgba(255,0,143,.5);*/
	background-color: rgba(255, 215, 0, .7);
	width: 100%;
	margin: 0;
	overflow-wrap: anywhere;
	word-break: break-all;
}
.side-grid-elem .matchsnippet {
	background-color: #FCFDEB;
}
.matchsnippet strong {
	color: goldenrod;
}

.side-grid-left {
	/*border-right: 0;*/
}

.side-grid-right {
	/*border-left: 0;*/
}

.side-grid .side-grid-left {
	/*border-right: black solid .7em;*/
}
#content .side-grid .side-grid-right {
	/*box-shadow: 0 0 0 0;*/
}
.side-gridtop-elem {
	position: relative;
	background-size: 120%;
	background-position: center;
	width: 100%;
	/*box-shadow: none;*/
}

.side-grid-elem a {
	background-color: rgba(0, 0, 0, 0.5);
	text-decoration: none;
	color: white;
	width: 100%;
}

#content .side-gridmid {
	height: 10em;
}

.grid-ad {
	/*background-image: URL('');*/
}

#footer {
	display: flex;
	flex-direction: row;
	justify-content: space-around;

	width: 100%;	
	background-color: black;
	border-top: 1px dashed black;
	color: white;	
}
#footer a img {
	width: 55%;
}

/************************
 ***Global Elements
 ************************/

iframe, video {
	width: 100% !important;
	max-width: 100% !important;
}

a {
}

#header a:hover, #side-suggestions a:hover, #body-subscribe a:hover {
	color: gold;	
	/*transition: 0.3s; /* Transition effects on hover (color) */
}

html body article #content a {
	text-decoration: none;
}

html body article #content h1 a:hover {
	color: white;
}

html body article #content a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	/*font-family: 'Press Start 2P', Courier, monospace;*/
	font-family: 'mono';
}

.side-grid h1, .side-grid h2, .side-grid h3, .side-grid h4, .side-grid h5, .side-grid h6 {
	/*font-family: 'Press Start 2P', Courier, monospace;*/
	font-family: 'mono';
	font-size: medium;
}

p {
	/*font-family: 'Poppins', sans-serif;*/
	font-family: 'mono';	
      	font-size: 23px;	
}

hr {border: 2px dashed white;}

/************************
 *** Embeds
 ************************/

.twitter-tweet {
	margin-left: 10%;
}

/************************
 ***Miscellaneous 
 ************************/


#stickyfoot img {
	width: 100%;
}
#stickyfoot iframe {
	width: 80% !important;
	/*overflow: scroll !important;*/
	/*height: 50% !important;*/
}
#adbox-menu {
	display: flex;
	flex-direction: row;
	/*justify-content: flex-end;*/
	/*align-items: flex-start;*/
}
#adbox-menu h5 {
	margin: .2em auto .2em 1em;
}
#adbox-menu #footer-adclosebtn {
	margin: .3em .3em .2em auto;
}
#adbox-menu #footer-adclosebtn:hover {
	color: gold;
	cursor: pointer;
}
.afstickydisplay {
	display: none;
}
#stickyfoot h4, #stickyfoot h5, #stickyfoot h6 {
	color: white;
}
#stickyfoot a {
	text-decoration: none;
}
#stickyfoot a:hover, #stickyfoot h4:hover, #stickyfoot h5:hover, #stickyfoot h6:hover {
	color: gold;
}

/* Responsive Rules */

/************************
 *** Sizes and Positioning 
 ************************/

@media only screen and (min-width: 401px) {
	#content {
		width: 90%;
	}
	.side-gridflex {
		height: 10em;
	}
	h3 {
		font-size: 80%;
	}
	#header-log-div {
		justify-content: flex-start;
	}
	#header-logo-home {
		margin-top: 1em;
		margin-bottom: 1em;
		margin-left: 40%;
		height: 50%;
		width: 100%;
	}
	#header-menu-img {
		margin-top: 1em;
		margin-bottom: 1em;
		margin-left: .8em;
		margin-right: 0;
		height: 50%;
	}
	#header-menu-elements {
		width: 50%;
       		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		color: white;
		padding-right: 10%;	
	}
		#header-search-icon {
			margin-right: 0;
			margin-left: 0;
			width: 26%;
		}
		#header-menu {
			font-size: 100%;	
			padding: 5%;
		}




	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: .4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: .2em .4em;
		font-size: 25px; 
		line-height: 1%;
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 7%;
		font-size: 45%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 7%;
		font-size: 80%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 10%;
		font-size: 120%;
		line-height: 100%;
	}
}

@media only screen and (min-width: 451px) {


	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: .4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: .2em .4em;
		font-size: 25px; 
		line-height: 1%;
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 10%;
		font-size: 45%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 9%;
		font-size: 80%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 9%;
		font-size: 140%;
		line-height: 100%;
	}
}

@media only screen and (min-width: 501px) {
	#stickyfoot {
		margin: auto auto 2% 2%;
		height: 90px;
		max-width: 76%;
		font-size: 17px;
	}
	#stickyfoot a h6 {
		margin: 5%;
	}

	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: .4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: .2em .4em;
		font-size: 25px; 
		line-height: 1%;
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 2%;
		font-size: 50%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 9%;
		font-size: 100%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 6%;
		font-size: 160%;
		line-height: 100%;
	}
}

@media only screen and (min-width: 551px) {


	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: .4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: .2em .4em;
		font-size: 25px; 
		line-height: 1%;
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 6%;
		font-size: 62%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 7%;
		font-size: 110%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 6%;
		font-size: 180%;
		line-height: 100%;
	}
}

@media only screen and (min-width: 601px) {


	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: .4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: .2em .4em;
		font-size: 25px; 
		line-height: 1%;
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 9%;
		font-size: 62%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 4%;
		font-size: 120%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 7%;
		font-size: 190%;
		line-height: 100%;
	}
}

@media only screen and (min-width: 651px) {


	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: .4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: .2em .4em;
		font-size: 25px; 
		line-height: 1%;
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 2%;
		font-size: 76%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 2%;
		font-size: 140%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 7%;
		font-size: 210%;
		line-height: 100%;
	}
}

@media only screen and (min-width: 701px) {


	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: .4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: .2em .4em;
		font-size: 25px; 
		line-height: 1%;
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 7%;
		font-size: 76%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 2%;
		font-size: 150%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 5%;
		font-size: 230%;
		line-height: 100%;
	}
}

@media only screen and (min-width: 751px) {


	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: .4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: .2em .4em;
		font-size: 25px; 
		line-height: 1%;
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 1%;
		font-size: 82%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 1%;
		font-size: 160%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 5%;
		font-size: 250%;
		line-height: 100%;
	}
}

@media only screen and (min-width: 801px) {


	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: .4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: .2em .4em;
		font-size: 25px; 
		line-height: 1%;
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 5%;
		font-size: 82%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 0%;
		font-size: 180%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 4%;
		font-size: 270%;
		line-height: 100%;
	}
	#categories {
		padding-bottom: 0;
	}
}

@media only screen and (min-width: 851px) {


	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: .4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: .2em .4em;
		font-size: 25px; 
		line-height: 1%;
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 0%;
		font-size: 92%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 0%;
		font-size: 190%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 4%;
		font-size: 290%;
		line-height: 100%;
	}
}

@media only screen and (min-width: 901px) {


	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: .4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: .2em .4em;
		font-size: 25px; 
		line-height: 1%;
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 2%;
		font-size: 102%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 2%;
		font-size: 200%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 5%;
		font-size: 310%;
		line-height: 100%;
	}
}

@media only screen and (min-width: 951px) {


	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: .4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: .2em .4em;
		font-size: 25px; 
		line-height: 1%;
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 5%;
		font-size: 102%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 2%;
		font-size: 210%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 5%;
		font-size: 320%;
		line-height: 100%;
	}
}

@media only screen and (min-width: 1000px) {
	#content {
		width: 50%;
	}
	#body-tabcontents {
		width: 52.8%;
	}
	.side-gridflex {
		flex-direction: row;
	}
	.side-grid-elem {
		height: 98%;
	}
	h3 {
		font-size: 80%;
	}
	#header-logo-div {
		justify-content: center;
	}
	#header-menu-div {
		justify-content: flex-start;
	}
	#header-logo-home {
		margin-top: 1em;
		margin-bottom: 1em;
		margin-left: 40%;
		height: 50%;
		width: 100%;
	}
	#header-menu-img {
		margin-top: 1em;
		margin-bottom: 1em;
		margin-left: .8em;
		margin-right: 0;
		height: 50%;
	}
	#feat-img {width: 70%}

	#side-suggestions {
		width: 70%;
	}




	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: .5em; /* Place the button .2em from the bottom of the page */
		right: 5em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: .2em .4em;
		font-size: 25px; 
		line-height: 1%;
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% auto;
		font-size: 102%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% auto;
		font-size: 210%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% auto;
		font-size: 320%;
		line-height: 100%;
	}
}

@media only screen and (max-width: 400px) {
	#content h1, #content h3, .body-tabcontent-title {font-size: .8em;}
	#body-tabcontents {font-size: .5em;}
	#content-title-area {padding:5em 0 0 0}
	html body article #content #editorguy {
		float: none;
		margin: 0;
		width: 100%;
	}
	.twitter-tweet {
		margin-left: 0;
	}
	.side-gridflex {
		height: 5em;
	}
	.side-grid-elem {
		height: 100%;
	}
	.side-gridtop-elem {
		background-size: cover;
	}
	.side-grid h1, .side-grid h2, .side-grid h3, .side-grid h4, .side-grid h5, .side-grid h6 {
		font-size: 70%;
	}
	.side-gridmid h1, .side-gridmid h2, .side-gridmid h3, .side-gridmid h4, .side-gridmid h5, .side-gridmid h6 {
		font-size: 70%;
	}
	.side-gridbottom h1, .side-gridbottom h2, .side-gridbottom h3, .side-gridbottom h4, .side-gridbottom h5, .side-gridbottom h6 {
		font-size: 70%;
	}
	#header {
		flex-direction: column;
	}
	#header-logo-div {
		text-align: center;
	}
	#header-logo-home {
		margin-top: 1em;
		margin-bottom: 0;
		margin-left: 0;
		height: 70%;
		width: 100%;
	}
	#header-menu-img {
		margin-top: 0;
		margin-bottom: 1em;
		margin-left: 0;
		margin-right: 0;
		height: 70%;
	}
	.overlay input[type="text"] {
		width: 80%;
	}



	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: .4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: .2em .4em;
		font-size: 20px; 
		line-height: 1%;
	}

	#content {
		width: 90%;
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 0;
		font-size: 40%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 7%;
		font-size: 70%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 14%;
		font-size: 100%;
		line-height: 100%;
	}
}

@media only screen and (max-width: 351px) {


	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: .4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: .2em .2em;
		font-size: 18px; 
		line-height: 1%;
	}
	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 9%;
		font-size: 30%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 10%;
		font-size: 60%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 3%;
		font-size: 90%;
		line-height: 100%;
	}
}

@media only screen and (max-width: 301px) {
	#stickyfoot {
		margin: auto auto 2% 3%;
		height: 70px;
		max-width: 70%;
		font-size: 17px;
	}
	#stickyfoot a h6 {
		margin: 1%;
	}

	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: .4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: .2em .2em;
		font-size: 18px; 
		line-height: 1%;
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 9%;
		font-size: 30%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 10%;
		font-size: 60%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 3%;
		font-size: 90%;
		line-height: 100%;
	}
}

@media only screen and (max-width: 251px) {


	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: .4em; /* Place the button .2em from the bottom of the page */
		right: .3em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: .5em .4em;
		font-size: 12px;
	       	line-height: 1%;	
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 0%;
		font-size: 21%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 5%;
		font-size: 40%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 10%;
		font-size: 50%;
		line-height: 100%;
	}
}

@media only screen and (max-width: 201px) {


	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: 4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: 0;
		font-size: 10px; 
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 0;
		font-size: 21%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 24%;
		font-size: 15%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 10%;
		font-size: 50%;
		line-height: 100%;
	}
}

@media only screen and (max-width: 151px) {


	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: 4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: 0;
		font-size: 10px; 
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 0;
		font-size: 10%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 24%;
		font-size: 15%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 15%;
		font-size: 30%;
		line-height: 100%;
	}
}

@media only screen and (max-width: 101px) {


	#myBtn {
		display: none; /* Hidden by default */
		position: fixed; /* Fixed/sticky position */
		bottom: 4em; /* Place the button .2em from the bottom of the page */
		right: .6em; /* Place the button .2em from the right */
		z-index: 99; /* Make sure it does not overlap */
		border: 2px dashed white;
		outline: none; /* Remove outline */
		background-color: rgba(0, 0, 0, .7); 
		color: white; 
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: 0;
		font-size: 10px; 
	}

	#content .text-art-lg {
		width: 100%;
	}
	#content .text-art-md {
		width: 100%;
	}
	#content .text-art-sm {
		width: 100%;
	}
	#content .text-art-lg pre {
		margin: 2% 0;
		font-size: 10%;
		line-height: 100%;
	}
	#content .text-art-md pre {
		margin: 2% 24%;
		font-size: 15%;
		line-height: 100%;
	}
	#content .text-art-sm pre {
		margin: 2% 15%;
		font-size: 30%;
		line-height: 100%;
	}
}

/************************
 *** NEW STUFF 
 ************************/

a:link {text-decoration: none;}

a:visited {text-decoration: none;}

a:hover {text-decoration: none;}

a:active {text-decoration: none;}

.invisible {
	display: none !important;
}
.modifymenubtn {
	margin: 7% 0 0 0 !important; 
	font-size: .8em !important;
}
.txt-highlight {
	color: gold;
}
.one-line-header {
	display: flex;
	justify-content: center;
	align-items: center;
}
.one-line-header hr {
	width: 20%;
	border: 2px solid white;
}

.menubtn:hover {
	color: gold;
	cursor: pointer;
}

/************************/

#header-area {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	background-color: black;
	z-index: 100;
}
.top-menu-line {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2em;
	width: 100%;
	background: black;
}

@media only screen and (max-width: 400px) {

}
@media only screen and (min-width: 401px) {

}
@media only screen and (min-width: 1000px) {

}

/************************/

#header-area .header-shoutbox {
	margin-top: 0;
	margin-bottom: 0;
	display: block;
	height: 2em;
	width: 100%;
	color: white;
	overflow: hidden;
	white-space: nowrap;
}
#header-area .header-shoutbox h4 {
	margin: 1% 0;
	height: 80%;
}

@media only screen and (max-width: 400px) {
	.header-shoutbox {
		font-size: .5em;
	}
}
@media only screen and (min-width: 401px) {

}
@media only screen and (min-width: 1000px) {

}

/************************/

#header-logo-area {
	height: 3em;
	padding: 2% 0 0 0;
}
#header-logo-area a {
	height: 100%;
	margin: 0 auto;
}
#header-logo-area #header-logo {
	height: 90%;
}

@media only screen and (max-width: 400px) {

}
@media only screen and (min-width: 401px) {

}
@media only screen and (min-width: 1000px) {

}

/************************/

#header-search-form {

}
#header-search-form input {
	height: 65%;
	width: 70%;
	margin: 0% 0% 0% 1%;
	background-color: black;
	color: white;
	/*font-family: 'Press Start 2P', Courier, monospace;*/
	font-family: 'mono';
	font-size: auto;
	border: white solid .15em;
}
#header-search-form input:focus {
	color: black;
	background-color: white;
}
#header-search-form button {
	height: 90%;
	width: auto;
	color: white;
	background-color: black;
	border: none;
	/*font-family: 'Press Start 2P', Courier, monospace;*/
	font-family: 'mono';
}
#header-search-form button:hover {
	color: gold;
	cursor: pointer;
}

@media only screen and (max-width: 400px) {
	#header-search-form input {
		width: 65%;
	}
	#header-search-form button {
		width: 35%;
		margin: 0;
		padding: 0;
	}
}
@media only screen and (min-width: 401px) {

}
@media only screen and (min-width: 1000px) {
	#header-search-form input {
		width: 50%;
	}
}

/************************/

#header-menu-items {
	/*margin: 1.5% auto;*/
	height: auto;
}
#header-menu-items a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 90%;
	margin: 0 1% 0 1%;
	text-decoration: none;
}
#header-menu-items .header-menu-sep {
	height: 90%;
	margin: 0 1% 0 1%;
	color: white;
}
#header-menu-items h4 {
	color: white;
	/*margin: 1em 0 0 0;*/
}
#header-menu-items h4:hover {
	color: gold;
}

#header-menu-items #header-top-button {
	/*height: 90%;*/
	/*margin: 1.5% 0 0 0;*/
	margin: 0; 
	/*font-size: .8em !important;*/
	/*background-image: url('data:image/gif;base64,R0lGODlhMgAyAKEAAAAAAP///wAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJHgAAACwAAAAAMgAyAAACX4SPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gubQRAb8xzf96vrbd9bAYGp4fBkNJaSyRGTGXo+P1Jpp1rdYLGZ7Rbj5VKzSLLMvESTxGdr2d2evuVx6Nxeb971NUwBACH5BAkeAAAALAAAAAAyADIAAAJihI+py+0Po5y02ouz3rz7D4biCAYBOZkmCqkq27gurMgyfdg2rutw30MBgaPhMGQ0fpLJDpO5eT4zUimmOl1Cf1tW1tsVhklfcZN7BqfNSnRb/WYfcfS6/Y7P6/f8vv/PUAAAIfkECR4AAAAsAAAAADIAMgAAAmiEj6nL7c9CgLRGOa2mGO9/dRJIGqJYfueZWuvaQu8bN/NcK/edH/ve+/1qQmGrWCwhkaRlMmjshYDSxbOauGJ90S136P1SwwCt17xFY9VVttRNjsvn9Lr9js/r9/y+/w8YKDhIWIhVAAA7');*/
	/*background-size: cover;*/
	height: 80%;
	width: 10%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

#header-menu-items #header-top-button:hover {
	cursor: pointer;
	/*background-image: url('data:image/gif;base64,R0lGODlhMgAyAKEAAAAAAP8pVQAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJHgAAACwAAAAAMgAyAAACX4SPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gubQRAb8xzf96vrbd9bAYGp4fBkNJaSyRGTGXo+P1Jpp1rdYLGZ7Rbj5VKzSLLMvESTxGdr2d2evuVx6Nxeb971NUwBACH5BAkeAAAALAAAAAAyADIAAAJihI+py+0Po5y02ouz3rz7D4biCAYBOZkmCqkq27gurMgyfdg2rutw30MBgaPhMGQ0fpLJDpO5eT4zUimmOl1Cf1tW1tsVhklfcZN7BqfNSnRb/WYfcfS6/Y7P6/f8vv/PUAAAIfkECR4AAAAsAAAAADIAMgAAAmiEj6nL7c9CgLRGOa2mGO9/dRJIGqJYfueZWuvaQu8bN/NcK/edH/ve+/1qQmGrWCwhkaRlMmjshYDSxbOauGJ90S136P1SwwCt17xFY9VVttRNjsvn9Lr9js/r9/y+/w8YKDhIWIhVAAA7');*/
}

@media only screen and (max-width: 400px) {
	#header-menu-items a { 
		font-size: .5em;
	}
	#header-menu-items #header-top-button { 
		font-size: .5em;	
	}
}
@media only screen and (min-width: 401px) {
	#header-menu-items #header-top-button {
		
	}
}
@media only screen and (min-width: 1000px) {

}

/************************/

#content .index-count {
	text-align: center;
	margin: 2% 10%;
}

.display-zone-ad-title {
	margin: 0;
	padding: 0 0 0 5%;
	text-align: left;
}

@media only screen and (max-width: 400px) {
	#content .index-count {
		font-size: .5em;
	}
}
@media only screen and (min-width: 401px) {

}
@media only screen and (min-width: 1000px) {

}

/************************/

#site-footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: auto;
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	background-color: black;
	z-index: 100;
}
#site-footer h4 {
	font-size: .7em;
}
#site-footer #stickyfoot {
	text-align: center;
	display: flex;
	flex-direction: column;
	margin: 0;
	width: 100%;
	height: 3em;
}
#site-footer #stickyfoot .display-zone-sticky {
	height: 80%;
}
#site-footer #stickyfoot h6 {
	margin: 0;
	font-size: 1em;
}
.action-menu {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 2em;
	padding: 1%;
	overscroll-behavior-y: contain;
}
.action-menu input {
	width: 35%;
	height: 80%;
	margin: 0% 0% 0% 0%;
	background-color: black;
	color: white;
	/*font-family: 'Press Start 2P', Courier, monospace;*/
	font-family: 'mono';
	font-size: auto;
	border: white solid .15em;
}
.action-menu input:focus {
	background-color: white;
	color: black;
}
.action-menu button {
	height: 90%;
	color: white;
	background-color: black;
	border: none;
	/*font-family: 'Press Start 2P', Courier, monospace;*/
	font-family: 'mono';
}
.action-menu button:hover {
	color: gold;
	cursor: pointer;
}
#clicksignup, #clickjoin {
	color: white;
	margin: 1% auto;
}
#clicksignup:hover, #clickjoin:hover {
	color: gold;
	cursor: pointer;
}

@media only screen and (max-width: 400px) {
	#clicksignup, #clickjoin {
		font-size: .5em;
	}

	#site-footer #stickyfoot h6 {
		margin: 0;
		font-size: .7em;
	}
}
@media only screen and (min-width: 401px) {

}
@media only screen and (min-width: 1000px) {
	#site-footer #stickyfoot {width: 40%;}
}

/************************/

#advanced-search {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 10em;
	/*background-image: url('/wp-content/icons/working-circuit-strip-lv-100.gif');*/
	background-size: cover;
}
#advanced-search-form {
	width: 90%;	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#advanced-search-form input {
	height: 65%;
	width: 90%;
	margin: 0% 0% 0% 1%;
	background-color: black;
	color: white;
	/*font-family: 'Press Start 2P', Courier, monospace;*/
	font-family: 'mono';
	border: white solid .15em;
}
#advanced-search-form input:focus {
	color: black;
	background-color: white;
}
#advanced-search-form .advanced-search-chkoption {
	background-color: rgba(0,0,0,.7);
}
#advanced-search-form .advanced-search-chkoption .advanced-search-checkbox {
	width: 10%;
	margin: 4% 0 0 7%;
	color: white;
	background: black;
}
#advanced-search-barsubmit {
	display: flex;
	flex-direction: row;
	height: 2em;
	justify-content: center;
	align-items: center;
	width: 70%;
}

.advanced-search-chkoption-row {
	display: flex;
	flex-direction: row;
}
.advanced-search-chkoption {
	display: flex;
	flex-direction: row;
	width: 48%;
	margin: 0 5%;
}
#advanced-search-form button {
	height: 90%;
	width: auto;
	color: white;
	background-color: black;
	border: none;
	/*font-family: 'Press Start 2P', Courier, monospace;*/
	font-family: 'mono';
	font-size: 1em;
	text-align: center;
}
#advanced-search-form button:hover {
	color: gold;
	cursor: pointer;
}

hr {border: 2px dashed white;}

@media only screen and (max-width: 400px) {
	#advanced-search {margin: 2% 0 0 0;}
	#advanced-search-form h4 {
		font-size: .5em;
	}
	#advanced-search-form input {
		width: 55%;
	}
	#advanced-search-form button {
		width: 40%;
		margin: 0;
		padding: 0;
	}
	#advanced-search-form input {font-size: .5em;}
	#advanced-search-form button {font-size: .5em;}
	#advanced-search-barsubmit {width: 90%;}
}
@media only screen and (min-width: 401px) {
	#advanced-search {height: 17em;}
}
@media only screen and (min-width: 1000px) {

}

/************************/

#notification-menu {
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2%;
	text-align: center;
	z-index: 100;
}

#notification-menu-close-btn {
	position: absolute;
	top: 1%;
	left: 95%;
}
#notification-menu-close-btn:hover {
	cursor: pointer;
	color: gold;
}

#loading-menu {
	z-index: 1000;
	top: 30%;
	left: 40%;
	height: 10%;
	width: 20%;
	color: white;
	/*display: flex;*/
	/* flex-direction: column; */
}
#loading-menu h3 {
	margin: auto;
}

#admin-icon {
	color: white;
	/*background: url('data:image/gif;base64,R0lGODlhMgAyAKEAAAAAAP///wAAAAAAACH5BAEKAAIALAAAAAAyADIAAAJ8hI+Zwe0Ko5yuhokztE/7zDXfKIUMiS5mygLm1aJvLK/0ON9frmt8j/kBS7YhpWiMCJOqEJPofG6Q0sPS88pqt9yu9wsOi8fksvmMTqvX7Lb7y7pK5U86057EG/VDPtDfA6gjeENIYxiD2KIYR1Xl4ljFmDJZE/VoFalRAAA7');
	height: 2em;
	width: 2em;
	background-size: 2em;*/
	margin: 0 .2em;
}
#admin-icon:hover {
	color: gold;
	cursor: pointer;
	/*background: url('data:image/gif;base64,R0lGODlhMgAyAKECAAAAAP8pVf///////yH5BAEKAAIALAAAAAAyADIAAAJ8hI+Zwe0Ko5yuhokztE/7zDXfKIUMiS5mygLm1aJvLK/0ON9frmt8j/kBS7YhpWiMCJOqEJPofG6Q0sPS88pqt9yu9wsOi8fksvmMTqvX7Lb7y7pK5U86057EG/VDPtDfA6gjeENIYxiD2KIYR1Xl4ljFmDJZE/VoFalRAAA7');*/ 
}
#admin-menu {
	color: white;
	overflow-y: scroll;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.sitewide-ops {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.sitewide-op:hover {
	cursor: pointer;
	color: gold;
}
#sitewide-ops-btn:hover, #article-utils-btn:hover, #article-gen-btn:hover, #traffic-report-btn:hover, #content-report-btn:hover, #financial-report-btn:hover, #user-report-btn:hover {
	cursor: pointer;
	color: gold;
}

.inner-menu-btn:hover {
	cursor: pointer;
	color: gold;
}

#traffic-report-week, #referrer-report-day, #search-report-day, #views-report-day, #pageviews-report-day, #pagevisits-report-day, #impressions-report-day {
	display: flex;
	flex-direction: column;
}

#article-util-post-gen-menu {
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	margin: .5em 1.5em;
}
.article-generator-div {
	display: flex;
	flex-direction: column;
}
.article-generator-div input {
	width: 100%;
}
.article-generator {
	display: flex;
	flex-direction: column;
}

.search-report-day-container, .views-report-day-container, .pageviews-report-day-container, .pagevisits-report-day-container, .impressions-report-day-container {
	display: flex;
	flex-direction: column;
}

.search-report-day-avemed, .views-report-day-avemed, .pageviews-report-day-avemed, .pagevisits-report-day-avemed {
	display: flex;
	margin: 0 auto;
}

.search-report-day-top, .views-report-day-top, .pageviews-report-day-top, .pagevisits-report-day-top, .impressions-report-day-top {
	display: flex;
	margin: 0 auto;
	width: 100%;
}

.search-report-day-average, .search-report-day-median, .views-report-day-average, .views-report-day-median, .pageviews-report-day-average, .pageviews-report-day-median, .pagevisits-report-day-average, .pagevisits-report-day-median, .impressions-report-day-date {
	margin: 0 2em;
}

.impressions-report-day-total, .impressions-report-day-pageview-average {
	margin: 0 1em;
}

.traffic-report-week-container h3, .referrer-report-day-container h3, .search-report-day-container h3, .views-report-day-container h3, .pageviews-report-day-container h3, .pagevisits-report-day-container h3, .impressions-report-day-container h3 {
	color: gold;
}

.traffic-report-week-dates, .referrer-report-day-urls, .referrer-report-day-frequency, .search-report-day-key, .views-report-day-key, .pageviews-report-day-key, .pagevisits-report-day-key, .search-report-day-value, .views-report-day-value, .pageviews-report-day-value, .pagevisits-report-day-value {
	margin: 0 auto;
}

.referrer-report-day-urls, .search-report-day-key, .views-report-day-key, .pageviews-report-day-key, .pagevisits-report-day-key {
	width: 50%;
}
.referrer-report-day-urls p, .search-report-day-key p, .views-report-day-key p, .pageviews-report-day-key p, .pagevisits-report-day-key p {
	white-space: nowrap;
	-moz-pre-wrap: nowrap;
	width: 100%;
	overflow-x: hidden;
}

.traffic-report-week-visitors, .referrer-report-day-frequency {
	margin: 0 auto;
}

.traffic-report-week-pageviews {
	margin: 0 auto;
}

.sub-menu-div {
	height: 60%;
	width: 80%;
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 9%;
	left: 9%;
	background: black;
	border: white solid .1em;
}

.balance-info {
	margin: 0 .5% 0 0;
}
#balance-menu {
	color: white;
	text-align: center;
	padding: 1%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: auto;
}
#balance-icon {
	color: white;
	margin: 0 .2em;
}
#balance-icon:hover {
	color: gold;
	cursor: pointer;
}
.discount-perc {
	color: white;
}
.pay-form {
	color: white;
}
.pay-form-button {
	color: white;
	text-decoration: none;
}
.pay-form-button:hover {
	color: gold;
	cursor: pointer;
}


.account-info {
	margin: 0 .5%;
}
#account-menu {
	color: white;
	text-align: center;
	padding: 1%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: auto;
}
#account-icon {
	color: white;
	/*background: url('data:image/gif;base64,R0lGODlhMgAyAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJMgABACwAAAAAMgAyAAACpYyPoMvtr5CcEtq7qK64uw0G3piFGkmaB8o+YAuXZwy/dGvfKCebl2r4AYUqos8CFCGHy2LzCEkaQ9OcixnFXp1Z7hb6pT7FXfBHe/amzQ3p2Lomh+FtdF19Z+v2/L7/DxgoiJFUuFFlaIiY6FbGqPj2aMcgybhYSUeJWXi5SdHpyRORoBkaVPqJGpo3werpStqzqioKYLpCewj4GMi7a/mb2LtRAAAh+QQJMgABACwAAAAAMgAyAAACkYyPoMvtr5CcEtq7qK64uw0G3piFGkmaB8o+YAuXZwy/dGvfKKf3/g8MCofEi8pgPCZVS1Mz9My5lJajqEqFWKMb7kybnTKxY3BZ7CSnzWs0tAiPy+f0+ogHxH8SQn3D3wMog9THx3YVJBhhxfjl1gjpBRm2Nzkpafk2iEgnNecpBxonCrdVGHnaOGS5epk6UQAAOw==');
	height: 2em;
	width: 2em;
	background-size: 2em;*/
	margin: 0 .2em;
}
#account-icon:hover {
	color: gold;
	cursor: pointer;
	/*background: url('data:image/gif;base64,R0lGODlhMgAyAIABAP8pVQAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJMgABACwAAAAAMgAyAAACpYyPoMvtr5CcEtq7qK64uw0G3piFGkmaB8o+YAuXZwy/dGvfKCebl2r4AYUqos8CFCGHy2LzCEkaQ9OcixnFXp1Z7hb6pT7FXfBHe/amzQ3p2Lomh+FtdF19Z+v2/L7/DxgoiJFUuFFlaIiY6FbGqPj2aMcgybhYSUeJWXi5SdHpyRORoBkaVPqJGpo3werpStqzqioKYLpCewj4GMi7a/mb2LtRAAAh+QQJMgABACwAAAAAMgAyAAACkYyPoMvtr5CcEtq7qK64uw0G3piFGkmaB8o+YAuXZwy/dGvfKKf3/g8MCofEi8pgPCZVS1Mz9My5lJajqEqFWKMb7kybnTKxY3BZ7CSnzWs0tAiPy+f0+ogHxH8SQn3D3wMog9THx3YVJBhhxfjl1gjpBRm2Nzkpafk2iEgnNecpBxonCrdVGHnaOGS5epk6UQAAOw==');*/ 
}
.rank-prog-bar {
	display: flex;
	justify-content: center;
	flex-direction: row;
	font-size: 0.5em;
}
.rank-prog-bar-line {
	color: white;
}
.completion-line {
	color: gold;
}
.account-delete-icon:hover {
	color: gold;
	cursor: pointer;
}


.ads-info {
	margin: 0 .5%;
}
#ads-menu {
	color: white;
	text-align: center;
	padding: 1%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: auto;
}
#ads-menu h5 {

}
#ads-icon {
	color: white;
	margin: 0 .2em;
}
#ads-icon:hover {
	color: gold;
	cursor: pointer;
}
.ad-list-title {
	margin: 1%;
}
#create-ad-btn:hover {
	color: gold;
	cursor: pointer;
}
#new-ad-cats {
	width: 80%;
	height: 2em;
	background: black;
	color: white;
}
.ads-menu input {
	width: 80%;
	height: 2em;
}
.ads-menu input:focus {
	color: black;
	background-color: white;
}
.option-lvl-2 {
	padding-left: 1em;
}
.option-lvl-3 {
	padding-left: 2em;
}
#new-ad-submit {
	height: 2em;
}
#list-account-ads {
	width: 80%;
	height: 30em;
}
#list-all-ads {
	width: 80%;
	height: 30em;
}
.user-ads, .sitewide-ads {
	margin: 1%;
	height: 90%;
	overflow-y: scroll;
	scrollbar-color: black white;
	scrollbar-width: thin;
}
.user-ads::-webkit-scrollbar {
  width: 12px;
}

/*technically obsolete (will be deprecated)*/
.user-ads::-webkit-scrollbar-track {
  background: white;
}

.user-ads::-webkit-scrollbar-thumb {
  background-color: black;
  border-radius: 1em;
  border: 1em solid white;
}
/**/

.user-ad-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: solid white .15em;
	height: 8em;
	margin: 4% 1%;
	overflow: hidden;
}
.user-ad-container-hov:hover {
	cursor: pointer;
	border: solid gold .2em;
}
.user-ad-info-date, .user-ad-info-id {
	margin: 1% 0 0 0;
}
.user-ad-action-btns button {
	height: auto;
}
.user-ad-info-back:hover {
	color: gold;
	cursor: pointer;
}


.chat-info {
	margin: 0 .5%;
}
#chat-menu {
	color: white;
	text-align: center;
	padding: 1%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: auto;
}
#chat-icon {
	color: white;
	/*background: url('data:image/gif;base64,R0lGODlhMgAyAKEAAAAAAP///wAAAAAAACH5BAEeAAIALAAAAAAyADIAAAJ1hI+py+0Po5y02ovzDbz7D4biSJbmiabqyrbuC8fyTNf2jedeootOH/oBP8Jhp2gM8HYI3NLXvD2DUdsUdJ1lmQdn1bQ9hcFf1bh0JqVHa2i31aa+YxivxV7BU/STpP8PGCg4SFhoeIhIpLHI2Oj4CBkpOVEAADs=');
	height: 2em;
	width: 2em;
	background-size: 2em;*/
	margin: 0 .2em;
}
#chat-icon:hover {
	color: gold;
	cursor: pointer;
	/*background: url('data:image/gif;base64,R0lGODlhMgAyAKEAAAAAAP8pVQAAAAAAACH5BAEKAAIALAAAAAAyADIAAAJ1hI+py+0Po5y02ovzDbz7D4biSJbmiabqyrbuC8fyTNf2jedeootOH/oBP8Jhp2gM8HYI3NLXvD2DUdsUdJ1lmQdn1bQ9hcFf1bh0JqVHa2i31aa+YxivxV7BU/STpP8PGCg4SFhoeIhIpLHI2Oj4CBkpOVEAADs=');*/
}
#new-msg-form-btn:hover {
	color: gold;
	cursor: pointer;
}
#user-inbox-title:hover {
	color: gold;
	cursor: pointer;
}
#user-outbox-title:hover {
	color: gold;
	cursor: pointer;
}
#new-msg-form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 80%;
}
.action-menu #new-msg-form .new-msg-title {
	width: 90%;
}
.action-menu #new-msg-form .new-msg-title:focus {
	color: black;
	background-color: white;
}
.action-menu #new-msg-form .new-msg-to {
	width: 90%;
}
.action-menu #new-msg-form .new-msg-to:focus {
	color: black;
	background-color: white;
}
.action-menu #new-msg-form .new-msg-parent {
	width: 90%;
}
.action-menu #new-msg-form .new-msg-parent:focus {
	color: black;
	background-color: white;
}
.new-msg-content {
	background-color: black;
	color: white;
	/*font-family: 'Press Start 2P', Courier, monospace;*/
	font-family: 'mono';
	font-size: .5em;
	border: white solid .15em;
	width: 90%;
	margin: 3% 0 3% 0;
}
.new-msg-content:focus {
	color: black;
	background-color: white;
}
#user-inbox {
	width: 95%;
}
.user-inbox {
	/*padding: 10% 0 0 0;*/
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	height: 25em;
	/*justify-content: center;*/
	align-items: center;
}
.inbox-msg {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: white solid .15em;
	margin: 2% 1%;
	width: 97%;
}
.inbox-msg-hov:hover {
	border: gold solid .15em;
	cursor: pointer;
}
.user-inbox-back-btn {margin: 2% 1% 0 1%;}
.user-inbox-back-btn:hover {
	color: gold;
	cursor: pointer;
}
.inbox-reply-btn {
	margin: 0 0 10% 0;
}
.msg-content {
	background-color: black;
	color: white;
	/*font-family: 'Press Start 2P', Courier, monospace;*/
	font-family: 'mono';
	font-size: 1.3em;
	border: white solid .15em;
	width: 90%;
	margin: 3% 0 3% 0;
	height: 9.5em;
	overflow-y: scroll;
}
#user-outbox {
	width: 95%;
}
.user-outbox {
	/*padding: 10% 0 0 0;*/
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	height: 25em;
	/*justify-content: center;*/
	align-items: center;
}
.outbox-msg {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: white solid .15em;
	margin: 2% 1%;
	width: 97%;
}
.outbox-msg-hov:hover {
	border: gold solid .15em;
	cursor: pointer;
}
.user-outbox-back-btn {margin: 2% 1% 0 1%;}
.user-outbox-back-btn:hover {
	color: gold;
	cursor: pointer;
}

.logout-area {
	margin: 0 0 0 .5%;
}
#logout-icon {
	color: white;
	margin: 0 .2em;
}
#logout-icon:hover {
	color: gold;
	cursor: pointer;
}

@media only screen and (max-width: 400px) {
	#notification-menu {
		font-size: .5em;
	}
	#notification-menu-close-btn {
		left: 90%;
		top: -7%;
		font-size: 2em;
	}

	#loading-menu h3 {
		font-size: .5em;
	}

	#admin-icon {
		font-size: .5em;
	}
	#admin-menu {font-size: .5em;}
	#balance-icon {
		font-size: .5em;
	}
	#balance-menu {font-size: .5em;}
	.pay-form-button {font-size: 1.7em;}

	#account-icon {
		font-size: .5em;
	}
	#account-menu .alias {font-size: .5em;}
	#account-menu .rank-title {font-size: .5em;}
	#account-menu .rank-prog {font-size: .5em;}
	#account-menu .rank-prog-bar {font-size: .5em;}
	#account-menu .email-address {font-size: .5em;}
	#account-menu .date-joined {font-size: .5em;}
	#account-menu .delete-account {font-size: .5em;}

	#ads-icon {
		font-size: .5em;
	}
	#create-ad-btn {
		font-size: .5em;
	}
	#ad-list-title, #ad-list-title-all {
		font-size: .5em;
	}
	#list-all-ads {
		height: 15em;
	}
	#list-account-ads {
		height: 15em;
	}
	#new-ad-submit {
		font-size: .5em;
	}
	#ads-menu h5 {
		font-size: .5em;
	}
	.user-ad-container h3 {
		font-size: .5em;
	}
	.user-ad-action-btns button {
		font-size: .5em;
	}

	#chat-icon {
		font-size: .5em;
	}
	#new-msg-form-btn {font-size: .5em}
	.action-menu #new-msg-form .new-msg-title {
		font-size: .5em;
	}
	.action-menu #new-msg-form .new-msg-to {
		font-size: .5em;
	}
	.action-menu #new-msg-form .new-msg-parent {
		font-size: .5em;
	}
	.new-msg-send-btn {font-size: .5em}
	#user-inbox-title {font-size: .5em}
	.user-inbox {font-size: .5em}
	.inbox-reply-btn {font-size: 1.2em}
	#user-outbox-title {font-size: .5em}
	.user-outbox {font-size: .5em}

	#logout-icon {
		font-size: .5em;
	}
}
@media only screen and (min-width: 401px) {
	#content-title-area {min-height: 10em;}
	.sub-menu-div {
		top: 9%;
	}
}
@media only screen and (min-width: 1000px) {
	#content-title-area {
		width:55.3%;
		min-height: 15em;
	}
	.sub-menu-div {
		left: 28%;
		width: 40%;
		height: 45%;
	}
}

/***********************/

#scrollspace {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 6em;
	min-height: 50%;
}
#scrollspace-title {
	color: white;
	text-align: center;
}

#scrollspace-tabs {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	color: white;
}
.scrollspace-tab {
	margin: 1% 3%;
}
.scrollspace-tab:hover {
	color: gold;
	cursor: pointer;
}
#oddnugget-tab-title {
	margin: 1% 1% 1% 0;
}

.scrollspace-results {
	display: flex;
	flex-direction: column;
}

.results-notification {
	color: white;
	text-align: center;
}

@media only screen and (max-width: 400px) {
	article {
		margin: 7em 0 0 0;
	}
	#content-title-area {
		padding: 2em 0 0 0;
	}
	#content-title-area #title-div-in-cta h1 {
		font-size: .8em;
	}
	#content-title-area #title-div-in-cta h2 {
		font-size: 1em;
	}
	#scrollspace-menu h3 { 
		font-size: .5em;
	}
	#scrollspace-tabs {
		height: 1.5em;
	}
	.side-title {
		font-size: .5em !important;
	}
	.side-grid-elem p {
		font-size: .5em !important;
	}
	.results-notification {
		font-size: .5em !important;
	}
	#stickyfoot {
		height: 2em !important;
	}
	#adbox-menu h5 {
		font-size: .6em;
	}
}
@media only screen and (min-width: 401px) {
	#content-title-area #title-div-in-cta h2 {
		font-size: .8em;
	}
}
@media only screen and (min-width: 1000px) {
	#scrollspace {
		max-width: 60%;
	}
}


/************************
 *** OLD STUFF 
 ************************/



/************************
 ***Colors
 ************************/

/************************ 
 ***Animations and Events
 ************************/

/*CRT Title Flicker*/

#title-div-in-cta {
	overflow-wrap: anywhere;
	width: 100%;
	background: rgba(0,0,0,0);
	padding: 0em;
	color: #eee;
       line-height: 1;
       text-shadow: 0.06rem 0 0.06rem gold, -0.125rem 0 0.06rem #75fa69;
       letter-spacing: 0em;
       animation-duration: 0.01s;
       animation-name: textflicker;
       animation-iteration-count: infinite;
       animation-direction: alternate;
}
/*#title-div-in-cta h1 { font-size: 3em; }*/

@keyframes textflicker {
  from {
    text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;
  }
  to {
    text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
  }
}

#header a:hover, html body article #content a:hover {
	color: gold;
	/*transition: 0.3s; /* Transition effects on hover (color) */
}

#header-menu-img:hover, #header-closebtn:hover {
	cursor: pointer;
}

.animatedone {
	animation: animate 80s linear infinite;
}
@keyframes animate {
	0% {
		background-position: 0% 0%;
	}
	50% {
		background-position: 90% 90%;
	}
	60% {
		background-position: 50% 90%;
	}
	100% {
		background-position: 0% 0%;
	}
	
}

.animated {
	animation: animated 40s linear infinite;
}
@keyframes animated {
	0% {
		background-position: 0% 0%;
	}	
	100% {
		background-position: 100% 0%;
	}
	
}

.animatedtwo {
	animation: animatedtwo 40s linear infinite;
}
@keyframes animatedtwo {
	0% {
		background-position: 0% 0%;
	}	
	100% {
		background-position: 0% 100%;
	}
	
}

.animatedthree {
	animation: animatedthree 80s linear infinite;
}
@keyframes animatedthree {
	0% {
		background-size: 100% 100%;
	}
	50% {
		background-size: 150% 150%;
	}	
	100% {
		background-size: 100% 100%;
	}
	
}

/************************
 ****Menu (Mobile)
 ************************/

.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
	display: none;
	height: 100%;
	width: 100%;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */ 
}

.overlay input[type=text] {
	background-color: black;
	color: white;
	/*font-family: 'Press Start 2P', Courier, monospace;*/
	font-family: 'mono';
	font-size: 30px;
	border: white solid .15em;
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 9%; /* 9% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* Position the close button (top right corner) */
#header-menuclosebtn {
  position: absolute;
  top: 20px;
  right: 45px;
}