:root {
--genwidth: 1000px ;
	--navwidth: 175px ;
	--fg: #ddd ;
	--altfg: #ccc ;
	--fgemph: white ;
	--bg: #111 ;
	--altbg: #333 ;
	--emph: #333 ;
	--bordercolor: #555 ;
	/*--bordercolor: #722FFF ;*/
	--limish: #0e0 ;
}

* {
  font-family: Hack ;
  cursor: none ;
}

html {
  font-family: Hack ;
  cursor: none ;
}

body {
  font-family: Hack ;
  background-color: black; 
  background-image: url("static/img/indexBG.jpg");
  background-repeat: repeat;
  background-position: center;
  background-attachment: scroll;
  margin-bottom: 200px ;
  cursor: none ;
}

main, nav, footer {
  font-family: Hack ;
	box-shadow: 10px 6px 19px 5px rgba( 0, 0, 0, 0.6) ;
  cursor: crosshair ;
}

main {
  font-family: Hack ;
	margin: auto ;
	color: var(--fg) ;
	background: var(--bg) ;
	border: solid 1px var(--bordercolor) ;
	padding: 1em ;
	border-radius: 10px ;
  cursor: crosshair ;
}

header h1 {
  font-family: Hack ;
  font-size: xxx-large ;
  font-weight: bold ;
  text-align: center;
  max-width: var(--genwidth) ;
  margin-left: auto ;
  margin-right: auto ;
  cursor: none ;
}

header {
  cursor: none ;
}
.lw, p img, li img, h1 img, h2 img, h3 img, h4 img, dt img, td img, dd img {
  cursor: crosshair ;
	max-height: 1em;
	max-width: 2em;
	vertical-align: middle ;
}

h1 {
  text-shadow: 1px 1px 1px black,
               2px 2px 1px black;
  text-align: center;
  animation: color-change 10s infinite;
  cursor: none ;
}

h1:hover {
  text-shadow: 5px 2px 80px cyan, 
               1px 1px 120px cyan; 
               1px 1px 10px cyan; 
               1px 1px 10px cyan; 
               2px 2px 20px cyan; 
               4px 4px 40px cyan; 
               8px 8px 80px cyan; 
               16px 16px 80px cyan; 
               32px 32px 40px cyan; 
  text-align: center;
  animation: color-change 1s infinite;
  cursor: none ;
}
/*,
               15px 14px 5px rgba( 0, 0.7, 1, 1),
               7px 1px 4px rgba( 0, 1, 1, 1),
               2px 3px 4px rgba( 0, 1, 1, 1),
               8px 12px 4px rgba( 0, 1, 1, 1),
               20px 6px 4px rgba( 0, 1, 1, 1),
               3px 10px 4px rgba( 0, 1, 1, 1),
               4px 15px 5px rgba( 0, 1, 1, 1) ;*/


@keyframes flash {
  /* (B1) FROM RED */
  from {
    text-shadow:
    0 0 5px #00ffff, 0 0 10px #ff00ff,
    0 0 20px #00ffff, 0 0 40px #ff00ff;
  }
  /* (B2) TO BLUE */
  to {
    text-shadow:
    0 0 5px #ff00ff, 0 0 10px #00ffff,
    0 0 20px #ff00ff, 0 0 40px #00ffff;
  }
}

@keyframes color-change {
  0% { color: #AA50FF; }
 10% { color: #722FFF; }
 20% { color: #1099FF; }
 30% { color: #00FFFF; }
 40% { color: #0BFFA9 ; }
 50% { color: #A0FFFF; }
 60% { color: #F0EEFF; }
 70% { color: #F399FF; }
 80% { color: #FF44A9 ; }
 90% { color: #E100F9; }
 100% { color:#AA00FF; }
}

@keyframes color-lightup {

  from {
    left: 0;
    top: 0;
  }

  10% {
    background-color: blue;
  }

  10% {
    background-color: green;
  }

  25%, 75% {
    background-color: red;
  }

  100% {
    left: 100px;
    top: 100px;
  }
}


@keyframes colorful-diagonal-slide {
  from {
    left: 0;
    top: 0;
  }

  0%, 2% {
    background-color: black;
    color: lime ;
	  border-color: lime ;
    border-width: 0.1px;
    border-style: solid;
  }

  2%, 3% {
    background-color: black;
    color: lime ;
	  border-color: lime ;
    border-width: 0.1px;
    border-style: solid;
  }
  3%, 5% {
    background-color: black;
    color: lime ;
	  border-color: lime ;
    border-width: 0.25px;
    border-style: solid;
  }
  5%, 10% {
    background-color: black;
    color: lime ;
	  border-color: lime ;
    border-width: 0.5px;
    border-style: solid;
  }
  10%, 15% {
    background-color: black;
    color: lime ;
	  border-color: lime ;
    border-width: 0.75px;
    border-style: solid;
  }
  15%, 20% {
    background-color: black;
    color: lime ;
	  border-color: lime ;
    border-width: 1px;
    border-style: solid;
  }
  20%, 25% {
    background-color: black;
    color: lime ;
	  border-color: lime ;
    border-width: 1px;
    border-style: solid;
  }
  25%, 50% {
    background-color: black;
    color: lightgreen ;
	  border-color: green ;
    border-width: 1px;
    border-style: thick;
  }

  50%, 65% {
    background-color: navy ;
    color: white ;
	  border-color: yellow ;
    border-width: 0.8px;
    border-style: solid;
  }

  65%, 70% {
    background-color: darkblue ;
    color: yellow ;
	  border-color: red ;
    border-width: 0.6px;
    border-style: thin;
  }

  70%, 74% {
    background-color: blue;
    color: orange ;
	  border-color: purple ;
    border-width: 0.4px;
    border-style: thin;
  }

  74%, 76% {
    background-color: lightblue;
    color: red ;
	  border-color: blue ;
    border-width: 0.2px;
    border-style: thin;
  }

  76%, 78% {
    background-color: cyan;
    color: magenta ;
	  border-color: cyan ;
    border-width: 0.1px;
    border-style: thin;
  }

  78%, 80% {
    background-color: lightcyan;
    color: darkmagenta ;
  }

  80%, 86% {
    background-color: white ;
    color: purple ;
  }
  
  86%, 87% {
    background-color: lightyellow ;
    color: navy ;
  }

  87%, 90% {
    background-color: yellow ;
    color: darkblue ;
  }

  90%, 92% {
    background-color: orange;
    color: blue ;
  }

  92%, 93% {
    background-color: darkred;
    color: lightblue ;
  }

  93%, 94% {
    background-color: red;
    color: cyan ;
  }

  94%, 95% {
    background-color:  pink ;
    color: lightcyan ;
  }

  95%, 96% {
    background-color:  magenta ;
    color: yellow ;
	  border-color: yellow ;
    border-width: 0.1px;
    border-style: thin;
  }

  96%, 97% {
    background-color: darkmagenta ;
    color: lightyellow ;
	  border-color: lightgreen ;
    border-width: 0.25px;
    border-style: thin;
  }

  97%, 98% {
    background-color: purple;
    color: white ;
	  border-color: green ;
    border-width: 0.4px;
    border-style: double;
  }

  98%, 99% {
    background-color: black;
	  border-color: green ;
    border-width: 0.5px;
    border-style: solid;
  }

  100% {
    left: 100px;
    top: 100px;
  }
}

/*
  0% { color: #DDDDDD }
 10% { color: #FEDDED; }
 20% { color: #EEBBDD; }
 30% { color: #DD88CC; }
 40% { color: #CC55BB ; }
 50% { color: #AA22AA; }
 60% { color: #9900BB; }
 70% { color: #7700CC; }
 80% { color: #5500DD ; }
 90% { color: #2200EE; }
 100% { color: #0500FF; }
}*/

sup {
  cursor: crosshair ;
	vertical-align: top;
	font-size: 0.6em;
}

nav {
	font-variant: small-caps ;
	margin-bottom: 5em ;
  cursor: crosshair ;
}

nav,footer {
	text-align: center ;
	clear: both ;
	background: var(--altbg) ;
	border-radius: 5px ;
	margin: auto ;
	border: solid 1px var(--bordercolor) ;
	max-width: var(--genwidth) ;
  cursor: crosshair ;
}

footer {
	color: var(--altfg) ;
  background-color: #020202 ;
	margin-top: 0em ;
  padding: 0.25em ;
  font-size: xx-small ;
	overflow-wrap: break-word ;
  cursor: copy ;
}

nav {
	max-width: var(--genwidth) ;
  color: #1F87EC ;
}

nav {
	max-width: var(--genwidth) ;
  color: #00D0FF ;
}

nav li,footer li {
	display: inline-block ;
	list-style: none ;
	background: var(--bg) ;
	border-radius: 5px ;
	padding: .5em ;
	max-width: 7em ;
  cursor: crosshair ;
}

nav ul, footer ul, #taglist {
	padding: 0;
	margin: .5em;
  cursor: crosshair ;
}

nav a:hover li, footer a:hover li,#tagcloud a:hover li {
	background: steelblue ;
	color: black ;
	box-shadow: 10px 10px 20px 20px cyan ;
}

strong { color: var(--fgemph) ; }

a strong { color: var(--limish) ; }

details { padding-left: 20px ; text-decoration: underline; }

pre {
  font-family: Hack, monospace ;
	background: #020202 ;
	border: 1px solid ;
	border-radius: 1px ;
  padding: 0.25em ;
	margin: 0.5em ;
  display: inline-block;
	white-space: nowrap;
  overflow: auto;
  text-align: center;
  cursor: text ;
}

pre:hover {
  color: transparent ;
}



code {
  font-family: Hack, monospace ;
	background: #020202 ;
	color: #FFFFFF ;
  padding: 0.25em ;
	margin: 0.5em ;
  overflow-wrap: break-word ;
  cursor: text ;
}

.cryptocontainer {
    font-family: Hack, monospace;
    display: flex ;
    flex-wrap: wrap ;
    justify-content: center ;
}
.cryptoinfo {
    font-family: Hack, monospace;
    max-width: 550px ;
    text-align: center ;
    padding-left: 5px ;
    padding-right: 5px ;
}

.cryptoinfo code {
  font-family: Hack, monospace;
	font-size: 50% ;
	overflow-wrap: breaborder: 0.01em solid #000000 ;
	border-radius: 1px ;
  font-size: 75% ;
  color: #FFFFFF ;
}

ul {
	margin-left: 20px ;
	margin-right: 20px ;
  cursor: crosshair ;
}

li img, p img {
	max-height: 1em ;
	max-width: 1em ;
	min-height: 1em ;
  min-width: 1em ;
  cursor: crosshair ;
}
.wormhole {
  cursor: help ;
}
 .wormhole a {
  cursor: help ;
}

h5 {
	text-align: center ;
	text-shadow: 1.25px 1px var(--emph) ;
	font-weight: normal ;
  cursor: crosshair ;
}

h1,h2,h3,h4,h5 {
	text-align: center ;
	text-shadow: 1.25px 1px var(--emph) ;
	font-weight: normal ;
  cursor: crosshair ;
}

h2 {
  color: #722FFF ;
}

h2:hover {
  text-shadow: 5px 2px 80px cyan, 
               1px 1px 120px cyan; 
               1px 1px 10px cyan; 
               1px 1px 10px cyan; 
               2px 2px 20px cyan; 
  animation: color-change 0.5s infinite;
}


h3 {
  color: #11DDFF ;
}

h3:hover {
  text-shadow: 3px 2px 80px cyan, 
               1px 1px 120px cyan; 
               1px 1px 10px cyan; 
               1px 1px 10px cyan; 
               2px 2px 20px cyan; 
  animation: color-change 0.5s infinite;
}

pre:hover {
  animation: colorful-diagonal-slide 0.25s infinite ;
}
h4 {
  color: #11DDFF ;
  animation: color-change 120s infinite ;

}

h4:hover {
  text-shadow: 3px 2px 80px cyan, 
               1px 1px 120px cyan; 
               1px 1px 10px cyan; 
               1px 1px 10px cyan; 
               2px 2px 20px cyan; 
  animation: color-change 1s infinite ;
}

a {
  color: turquoise ;
  text-decoration: none ;
  cursor: pointer ;
}

a:hover {
  text-shadow: 3px 2px 80px cyan, 
               1px 1px 120px cyan; 
               1px 1px 10px cyan; 
               1px 1px 10px cyan; 
               2px 2px 20px cyan; 
  animation: color-change 1s infinite;
}

dt {
  font-family: Hack ;
  color: lightgray ;
  cursor: crosshair ;
}

dt:hover {
  font-family: Hack ;
  /*font-weight: bold ;*/
  color: white ;
  cursor: crosshair ;
}

dd {
  font-family: Hack ;
  cursor: crosshair ;
  /*font-size: 80% ;*/
}

dd:hover {
  font-family: Hack ;
  /*font-weight: bold ;*/
  color: white ;
  cursor: crosshair ;
}

dl {
  font-family: Hack ;
  cursor: crosshair ;
}

code:hover {
  cursor: crosshair ;
  /*animation: color-lightup 0.50s infinite ;*/
  animation: colorful-diagonal-slide 30s infinite ;
}

.disappear {
	display: none ;
}

/* This should be genwidth + (navwidth*2) + padding */
@media (min-width: 1400px) {
	nav {
		float: left ;
		width: 175px ;
		position: fixed ;
		text-align: left ;
		font-size: large ;
    cursor: crosshair ;
	}

	nav::before {
		content: "" ;
		text-align: center ;
		display: block ;
		font-size: large ;
		color: violet ;
		text-decoration: underline ;
		margin-top: .5em ;
    cursor: crosshair ;
	}

nav li {
		display: block ;
		text-align: center ;
		margin: .5em auto ;
    cursor: crosshair ;
	}

}

.resright, .resmid {
    max-height: 300px ;
    max-width: 90% ;
    margin: auto ;
    display: block ;
}

@media (min-width: 55em) {

	.resright, .disappear {
		display: block ;
		float: right;
		padding: 20px ;
		clear: both ;
		max-height: 300px ;
		max-width: 300px ;
	}

	.resmid {
		max-height: 300px ;
		max-width: 300px ;
	}

	main {
		max-width: var(--genwidth) ;
    cursor: crosshair ;
	}

	.column {
		float: left;
		width: 50% ;
    cursor: crosshair ;
	}

}

.entry p, .entry li {
  margin-left: 2em ;
}

figure img {
  max-width: 100% ;
  margin: auto ;
}

figcaption {
  font-family: Hack ;
  font-style: italic ;
  font-size: small ;
}

figure {
  text-align: center;
}

#toc {
	font-size: x-large ;
	margin-left: auto ;
	margin-right: auto ;
	max-width: 500px ;

}

#toc li {
  padding: 5px
}

.new a {
	color: yellow ;
}

.new a:hover {
	color: magenta ;
}

.new::after {
	content: " 🆕" ;
	color: goldenrod ;
}

/* For QR codes for bitcoin and crypto */
.qr {
  max-width: 150px ;
  padding: 10px ;
  cursor: crosshair ;
}

.entryinfo {
	text-align: center ;
	font-size: x-small ;
	margin: 0 ;
}

#tagcloud {
	font-size: large ;
	font-variant: small-caps ;
	padding: 0;
	background: var(--altbg) ;
	border-radius: 10px ;
	text-align: center ;
	margin: 0 auto ;
  cursor: crosshair ;
}

#tagcloud li {
	display: inline-block ;
	padding: 5px ;
	margin: 3px ;
	width: auto ;
	background: var(--bg) ;
	border-radius: 10px ;
  cursor: crosshair ;
}

#taglist {
	max-width: 300px ;
	margin: auto ;
	text-align: center ;
	display: block ;
}

#taglist li {
	display: inline-block ;
	padding-right: 0.5em ;
	padding-left: 0.5em ;
}

#taglist::before {
  content: "This article is tagged as:" ;
  display: block;
  font-size: small ;
}

#taglist::after {
  content: "Click the links above for related articles." ;
  display: block ;
  font-size: small ;
}

aside {
  font-family: Hack ;
  font-style: italic ;
  font-weight: ligger ;
	font-size: small ;
	color: lightgray ;
	margin-left: 3em ;
	margin-right: 3em ;
	padding: 0 1em 0 1em ;
	border: 1px solid black ;
	border-radius: 20px ;
  cursor: crosshair ;
}

div {
  cursor: crosshair ;
}

.titleimg {
	margin: auto ;
	max-width: 90% ;
	display: block ;
}

.resmid {
	margin: auto ;
	display: block ;
}