html {
    font-size: 14px;
    font-family: "Inconsolata", monospace;
    color: white;
    background-color: black;
	background-image: url('../images/bg.gif'); 
	background-repeat: repeat;
	background-size: auto;
	background-position: center top;
	background-attachment: fixed;
}

.headerimage {
    width: 100%;
    height: 200px;
	background-image: url('../images/headertest2.gif'); 
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}




/* this is my navigation bar below */
nav {
	width: 100%;
	float: none;
	position: sticky;
	top: 0;
	padding: 0px;
	background-color: #101010;
}

.menu {
	padding: 0px;
	text-align: center;
}

.menu li {
	display: inline;
	
}

.button {
	padding: 20px;
	text-decoration: none;
}
.button:link {
	color: lemonchiffon;
}

.button:visited {
	color: lemonchiffon;
}

.button:hover {
	color: palegoldenrod;
}

@media only screen and (max-width: 500px) {
  .button {
    padding: 10px;
	  }
}

/* End of navigation bar code */

h1 {
  font-family: 'Secular One', sans-serif;
  font-size: large;
  text-align: center;
  margin: 0;
  padding: 10px 0;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.125em;
}

h2 {
	font-family: 'Secular One', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.125em;
}

p, li {
  font-size: 14px;
  line-height: 1.563;
  letter-spacing: 1px;
}



body {
  max-width: 600px;
  margin: 0 auto;
  background-color: #101010;
  padding: 0 20px 20px 20px;
  font-family: 'Inconsolata', monospace;
}

mark {
  background-color: #ef3b24;
	color: white;
}

a:link {
	color: lemonchiffon;
	text-decoration: none;
}

a:visited {
	color: lemonchiffon;
}

a:hover {
	color: palegoldenrod;
}

img {
  max-width: 100%;
}

footer {
    text-align: center;
	width: 100%;
    float: none !important;
}

.IMGsmall {
	width:50%
}

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Solid border */
hr.solid {
  border-top: 3px solid #fff;
}
/* this is my article contents shading below */


/* end of articles shading bit */