body {
    background-color: #202224;
    /* color: #dbdbdb; */
    color: #FFF ;
    font-family: 'Open Sans', sans-serif;
	margin-bottom: 200px ;
    /* max-width:650px; */
    line-height:1.6;
    font-size:18px;
	margin: 0;
}
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
  }
  .active {
	background-color: #292C2E;
  }
  li
  {
	float: left;
	/*display: inline;*/
  }

  li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
  }
  
  /* Change the link color to #111 (black) on hover */
  li a:hover {
	background-color: #111;
  }
.main {
        margin: auto ;
		text-align: center;
}
.main svg {
	vertical-align: -.3em;
	margin-right: .3rem;
	-webkit-filter: invert(100%);
	filter: invert(100%)
}
.main svg:hover {
	filter: invert(0%)
}

 p img, li img, h1 img, h2 img, h3 img, h4 img {
	vertical-align: middle ;
	max-width: 1em;
	max-height: 1em;
	border: none ;
	display: inline ;
}

img {
	max-width: 90% ;
	margin: auto ;
	display: block ;
	border: solid 5px beige ;
}
.titleimg {
	border: none ;
	height: 150px ;
}

 h1 {
	text-align: center ;
	color: lightgreen ;
}

header h1 {
	font-size: 40px ;
}

h2 {
	text-align: center ;
	color: deeppink ;
	font-variant: small-caps;
	font-size: 24pt ;
	border-bottom: dashed #ddd 1px ;
	max-width: 500px ;
	margin: 1em auto ;
}

footer {
	text-align: center ;
	font-variant: small-caps ;
	clear: both ;
	padding: 2em 0 ;
}
footer li {
	display: inline-block ;
	padding: 0 .5em ;
	font-size: x-large ;
}
footer li:hover {
	background: lightblue ;
}

footer { font-size: large ; }

h1,h2,h3{
font-family:  Arial;
}

a{
color:royalblue;
text-decoration:none;
}
a:hover{color:lightblue;}

 code {
	color: lime ;
	border-radius: 5px ;
}



aside {
    border: solid 1px black ;
    border-radius: 20px ;
    padding: 0 1em 0 1em ;
    font-size: small ;
}

aside p {
    color: gray ;
}

aside code {
    color: green ;
}

/* .callout here is refencing any aside given the class name callout
 * An example being: <aside class="callout"> */
aside.callout  {
    border: solid 1px orange;
}

.cnp {
	width: 100% ;

}

.cryptocontainer {
    display: flex ;
    flex-wrap: wrap ;
    justify-content: center ;
    display: table;
}



/* This "@media" block defines rules that will only be applied when the minimum
 * width of the screen is 55em or greater. In essence, they are settings that
 * only apply on normal weide screens, but *not* phones and low res monitors.
 * Since we have more room on widescreens, we change a couple things. */

 @media (min-width: 55em) {

    aside {
    margin: 0 30px 0 30px;
    }

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

    header { max-width: 900px ; margin: auto;}
	main { max-width: 850px ; }
}

.ll { font-size: large ; line-height: 1.3em ; max-width: 600px; margin: auto ; }

/* These settings are for the cryptocurrency donation QR codes and info on the
 * main page. */
.qr { max-width: 150px ; padding: 10px; border: none; }
.cryptocontainer {
    display: flex ;
    flex-wrap: wrap ;
    justify-content: center ;
}
.cryptoinfo {
    max-width: 350px ;
    text-align: center ;
    padding-left: 10px ;
    padding-right: 10px ;
}
.cryptoinfo code,.crypto {
	font-size: small ;
	overflow-wrap: break-word ;
}

/* The "Next Article" Button changes color and also has a 👉 automatically
 * added to its front. */

@-webkit-keyframes next {
    0% {color: yellow ;}
    100% {color: lightblue}
}

.next a {
	color: inherit ;
}

.next {
	color: red ;
	  -webkit-animation:next 1s infinite alternate ;
	font-size: xx-large ;
	text-align: center ;
	margin: auto ;
	display: block ;
	font-weight: bold ;
	padding: 1em ;
}

.next:before {
	content: "👉" ;
}