/**** MIN.CSS (FIRST PASS) ****/
/* Copyright 2014 Owen Versteeg; MIT licensed */
body,
textarea,
input,
select {
	background:0;
	border-radius:0;
	font:16px sans-serif;
	margin:0
}
.smooth {
	transition:all .2s
}
.btn,
.nav a {
	text-decoration:none
}
.container {
	margin:0 20px;
	width:auto
}
label>* {
	display:inline
}
form>* {
	display:block;
	margin-bottom:10px
}
.btn {
	background:#999;
	border-radius:6px;
	border:0;
	color:var(--main);
	cursor:pointer;
	display:inline-block;
	margin:2px 0;
	padding:12px 30px 14px
}
.btn:hover {
	background:#888
}
.btn:active,
.btn:focus {
	background:#777
}
.btn-a {
	background:#0ae
}
.btn-a:hover {
	background:#09d
}
.btn-a:active,
.btn-a:focus {
	background:#08b
}
.btn-b {
	background:#3c5
}
.btn-b:hover {
	background:#2b4
}
.btn-b:active,
.btn-b:focus {
	background:#2a4
}
.btn-c {
	background:#d33
}
.btn-c:hover {
	background:#c22
}
.btn-c:active,
.btn-c:focus {
	background:#b22
}
.btn-sm {
	border-radius:4px;
	padding:10px 14px 11px
}
.row {
	margin:1% 0;
	overflow:auto
}
.col {
	float:left
}
.table,
.c12 {
	width:100%
}
.c11 {
	width:91.66%
}
.c10 {
	width:83.33%
}
.c9 {
	width:75%
}
.c8 {
	width:66.66%
}
.c7 {
	width:58.33%
}
.c6 {
	width:50%
}
.c5 {
	width:41.66%
}
.c4 {
	width:33.33%
}
.c3 {
	width:25%
}
.c2 {
	width:16.66%
}
.c1 {
	width:8.33%
}
h1 {
	font-size:2em
}
.btn,
h2 {
	font-size:1.6em
}
h3 {
	font-size:1.2em
}
.ico {
	font:33px Arial Unicode MS,Lucida Sans Unicode
}
.addon,
.btn-sm,
.nav,
textarea,
input,
select {
	outline:0;
	font-size:16px
}
textarea,
input,
select {
	padding:8px;
	border:1px solid #ccc
}
textarea:focus,
input:focus,
select:focus {
	border-color:#5ab
}
textarea,
input[type=text] {
	-webkit-appearance:none;
	width:13em
}
.addon {
	padding:8px 12px;
	box-shadow:0 0 0 1px #ccc
}
.nav,
.nav .current{
	background:var(--nav-bg);
	color:var(--nav-main)
}
.nav a:hover {
	color:var(--pop1)
}

.nav {
	height:fit-content;
	padding:18px 0 14px
}
.nav a {
	color:var(--gray);
	padding-right:1em;
	position:relative;
}
.nav .pagename {
	font-size:22px;
	top:1px
}
.btn.btn-close {
	background:var(--bg);
	float:right;
	font-size:25px;
	margin:-54px 7px;
	display:none
}
@media(min-width:760px) {
	.container {
		margin:auto;
		width:720px;
	}
}
@media(max-width:760px) {
	.row .col {
		width:100%
	}
}
@media(max-width:480px) {
	.btn.btn-close {
		display:block
	}
	.nav {
		overflow:hidden
	}
	.pagename {
		margin-top:-11px
	}
	.nav:active,
	.nav:focus {
		height:auto
	}

	.nav a {
		padding:.5em 0;
		display:block;
		width:50%
	}
}
.table th,
.table td {
	padding:.5em;
	text-align:left
}
.table tbody>:nth-child(2n-1) {
	background:#ddd
}
.msg {
	padding:1.2em;
	background-color: var(--main);
	color: var(--bg);
	border-left:12px solid var(--pop1);
}

/**** SECOND PASS ****/
/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
	 "how to change link color." 
*/

@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,400;0,800;0,900;1,400;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');


@font-face {
	font-family: 'Versus';
	src: url(fonts/Versus.ttf);
}
@font-face {
	font-family: 'FriendlyFire';
	src: url(fonts/FriendlyFire.ttf);
}
@font-face {
	font-family: 'SelectMono';
	src: url(fonts/SelectMono-Italic.otf);
}

@font-face {
	font-family: 'Chaney';
	src: url(fonts/CHANEY-REGULAR.OTF);
}


@font-face {
	font-family: 'Chaney Wide';
	src: url(fonts/CHANEY-WIDE.OTF);
}

@font-face {
	font-family: 'Chaney Extended';
	src: url(fonts/CHANEY-EXTENDED.OTF);
}

@font-face {
	font-family: 'Futura';
	src: url(fonts/FUTURA-BOO.TTF);
}

@font-face {
	font-family: 'Futura Round';
	src: url(fonts/FUTURAT-MEDIRO1.TTF);
}

html, body 
{
  	min-height: 100%;
  	margin: 0;
}

body 
{
	background-color: var(--bg);
	color: var(--main);
	font-family: 'Work Sans', sans-serif;
	font-weight: normal;
	font-size: 18px;
}

iframe
{
	display: block;
	margin:	auto;
}

p
{
	line-height: 1.4em;
	margin-top: 0.4em;
	margin-bottom: 0.8em;
	text-indent:0;
}

p+p
{
	text-indent:0em;
}

.code p
{
	white-space: pre;
	line-height: 0.5em;

}

div.code
{
	color: var(--code-main);
	background-color: var(--code-bg);
	padding: 0.5em;
}

.code
{
	font-family: 'Liberation Mono', monospace;
	font-size: 16px;
}

h1, h2, h3 
{
	font-family: 'Chaney', sans-serif;
	font-style: normal;
	margin-bottom: 0.3em;
	margin-top: 1.1em;
	text-transform: uppercase;
}



h3
{
	font-style:normal;
}

h2
{
  	border-style: none none solid none;
	border-width: 4px;
	border-color: var(--pop1);
}

h4
{
	color:var(--gray)
}

article h1
{
	margin-bottom: 0;
}

a
{
	color: var(--pop1);
	font-weight: 500;
	text-decoration: none;
}

.main a
{
	color: var(--main);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom: 2px solid var(--pop1)
}

.main a:hover
{
	color: var(--pop1);
	border-bottom: 4px solid var(--pop1);
}

.nav a
{
	font-family: 'FriendlyFire', sans-serif;
	font-style: normal;
	text-transform: uppercase;
	font-size: 2.4em;
	
}

.ico
{
	font-family: 'FriendlyFire', sans-serif;
	font-size: 2.0em;
}

li
{
	line-height: 1.3;
}

article h1
{
	text-transform: none;
}

figcaption
{
	font-style: italic;
}

.title
{
	word-wrap: break-word;
	font-family: 'Chaney Wide', sans-serif;
	color:var(--pop1);
	text-shadow: 0.05em 0.05em var(--pop2);
	font-weight:900;
	font-size: 2.2em;
}

.tagline
{
	margin-top: 0;
	margin-bottom: 0.6em;
	font-family: 'SelectMono', sans-serif;
	color: var(--pop2);
	text-shadow: 0.05em 0.05em var(--pop1);
	font-weight: bold;
	font-size: 1.2em;
}

.container h1:first-child
{
	margin-top:0.8em;
}

#nextprev
{
	text-align: center; 
	margin: 2.5em auto 0.5em;
	font-family: 'Exo', sans-serif;
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
}

#footer p
{
	font-size: 0.55em;
	font-family: 'SelectMono', serif;
}

.date, .author
{
	font-size: 0.9em;
	font-style: italic;
}

.date
{
	margin-bottom: 0%; 
	margin-top: 1.0em;
}

.author
{
	font-weight: normal; 
	margin-top: 0; 
	margin-bottom:0.8em
}

img, iframe, div.code
{
	border: 2px dashed var(--pop2);
	max-width:100%;
	max-height:100%;
	margin-left: auto;
	margin-right: auto;
	object-fit: cover;
	display: block;
}

.msg
{
	font-family: 'Exo', sans-serif;
}

.superscript
{
	position: relative; 
	top: -0.5em; 
	font-size: 80%;
}

.footnote
{
	font-size: 90%;
	color: var(--grey);
	font-style: italic;
}

#jam {
	font-weight: 100;
	font-style: normal;
}

@keyframes wiggle
{
	0% { 	transform: rotate(-0.1deg); }
	50% { 	transform: rotate(0.1deg); }
	100% { 	transform: rotate(-0.1deg); }
}

@keyframes wiggle-more
{
	0% { 	transform: rotate(-1deg); }
	50% { 	transform: rotate(1deg); }
	100% { 	transform: rotate(-1deg); }
}

.wiggle
{
	animation: wiggle 1s infinite;
}

.wiggle-more
{
	animation: wiggle-more 1s infinite;
}

.wiggle, .wiggle-more
{
	animation-timing-function: cubic-bezier(0.3, 0.7, 0.6, 1.5)
}

.wiggle:not(hr), .wiggle-more:not(hr)
{
	display: inline-block;
}