@font-face {
	font-family: 'CyberDot';
	src: url('/fonts/CyberDot.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
pre {
	overflow:auto;
}
video {
	display:block;
	width:100%;
}
:root {
	--neon-blue: #5fffff;
	--neon-blue-alpha: rgba(37.3,100,100,0.5);
	--neon-pink: #ff38a0;
	--neon-pink-alpha: rgba(100,22,62.7,0.5);
	--neon-skin: #d8b9a6;
	--neon-skin-alpha: rgba(84.7,72.5,65.1,0.5);
}
c-body {
	display:block;
	margin:1em;
}

gold-row {
	align-self:stretch;
	h5 {
				background:var(--neon-pink);
				color:black;
				margin:0;
				padding:0 0.5em;
}
}

gold-banner {
	gold-banner-card {
		text-frame {
			h2 {
				background:var(--neon-pink);
				color:black;
				margin:0;
				padding:0.5em;
			}
			p {
				padding:0.5em;
				margin:0;
			}
		}
	}
}
.bit-font{
	display:block;
	font-family: CyberDot;
}
html {
	margin:0;
	padding:0;
	font-family:monospace;
	color:var(--neon-blue);
	min-height:100%;

	-moz-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
	background-image:url('/images/background.webp');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

a { color:inherit; }

cyber-article {
	h2 {
		margin:0;
		padding:0.25em;
		display:flex;
		color:black;
		background:var(--neon-pink);
	}
	figure {
		width:90%;
		margin:0;
		padding:1em;
		img {
			width:100%;
			padding:0;
			margin:0;
		}

		figcaption{}
	}
	figure.left{width:40%;}
	figure.right{width:40%;}
	a {
		display:inline;
	}
	p {
	}
}

.left {float:left}
.right {float:right}
c-content {
	display:block;
	max-width:75em;
	margin:0 auto;
	border:2px solid var(--neon-blue);
	background: rgba(0,0,0,0.85);

	c-wide-hr {
		display:block;
		background:;
		background: linear-gradient(to right, var(--neon-blue) 0%, var(--neon-blue) 45%, #ddc0f4 100%);

		height:1em;
		margin:0.25em 0;
	}
	.indent {
		margin:0.25em 1em;
	}
	.flesh {
		background:var(--neon-skin);
	}
	hr {
		margin:0 1em;
		border-bottom:2px solid var(--neon-blue);
	}
}
img.logo {
	width:256px;
}
c-header {
	display:flex;
	justify-content: space-between;
	width:100%;
	border-bottom:2px solid var(--neon-blue);
	a {
		color:inherit;
		color:var(--neon-blue);
		display:inline-block;
		padding:0.5em;
		transition: all 0.4s ease-in-out;
	}
	a:hover {
		background:var(--neon-pink-alpha);
	}
	c-header-left {
	}
	c-header-right {
	}
}
c-element {
	display:inline-block;
	height:128px;
	width:128px;
	background:rgba(0,100,0,0.8);
	border:1px green dashed;
}
c-side {
	display:block;
	float:right;
	width:128px;
	height:128px;
	background:rgba(0,0,100,0.8);
	border:1px blue dashed;
}
c-columns{
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content: space-between;

	c-column-left {
		display: flex;
		flex-direction: column;
		padding:0.25em; 
		width:50%;
		flex-grow:1; 
	}
	c-column-right{
		display: flex;
		flex-direction: column;
		width: 50%; 
		padding:0.25em; 
	}
}
c-columns.main {
	c-column-left{width:60%}
	c-column-right{width:30%}
}
c-columns.small {
	c-column-left{width:60%}
	c-column-right{width:30%}
}
.small {
	font-size:x-small;
}
@media (max-width: 600px) {
	c-columns.main c-column-left {
		width: 100%;
	}
	c-columns.main c-column-right {
		width: 100%;
	}
	c-bar	c-bar-left {
		width: 100%;
	}
	c-bar c-bar-right {
		max-width:100%;
	}

}
cyber-flex {
	display:flex;
	flex-direction:row;
	justify-content: space-between;
	overflow:hidden;
	padding:0;
	margin:0;
	a {
		padding:0.5em;
		display:block;
		text-decoration:none;
		transition: background 0.4s ease-in-out;
	}
	a:hover {
		background:var(--neon-pink-alpha);
	}
}
cyber-flex.column {
	flex-direction:column;
}
cyber-flex.row {
	flex-direction:row;
}

cyber-flex.corner-ad {
	border-top:1px white solid;
	border-right:1px white solid;
	padding:0.5em;
	margin:0.5em;
	p { 
		font-family: CyberDot;
		font-size:1em;
		line-height:1.3em;
		margin:0;
		padding:0;
		margin-bottom:0.5em;
	}
	h5 {
		margin:0;
		font-size:1.5em;
		padding:0.33em;
		display:inline-block;
		color:black;
		background:var(--neon-pink);
	}
}
cyber-article {
	display:block;
	width:100%;
	h5 { display:block; width:100%; }
	p {}
	blockquote {
		font-family: CyberDot;
	}
}

c-bar {
	.hover-glow :hover{
		background:var(--neon-pink-alpha);
	}
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	padding:1em;
	c-bar-left.title {
		img {
			height:10em;
			margin:1em;
			border:2px solid var(--neon-blue);
		}
	}
	c-bar-right.title {
		h5 { 
			line-height:1.3em;
			font-family: CyberDot;
			font-size:large; margin:0;padding:0;
		}
		flex: 1;
		margin:1em;
		padding:1em;
		color:var(--neon-pink);
		border:2px dashed var(--neon-pink);
	}

	c-bar-left.under {
	}
	c-bar-right.under {
		h5 {
			display:block;
			line-height:1.0em;
			font-family: CyberDot;
			font-size:large;
			margin:0;
			padding:0;
		}
		flex: 1;
		margin:1em;
		padding:1em;
		color:var(--neon-blue);
	}
}

.hot {
	margin:0;
	padding:0.33em;
	display:flex;
	color:black;
	background:var(--neon-pink);
}

c-hot-title-cold-text {
	h5 {margin:0;padding:0.25em;display:inline-block;color:black;background:var(--neon-pink);}
	p {margin:0;padding:0;display:inline-block;}
}

.clear-both {
	clear:both;
}
c-footer {
	clear:both;
	display:flex;
	justify-content: space-between;
	flex-direction:row;
	border-top:2px solid white;
	padding:0 1em;
	color:white;
}