body {
	background-color: black;
	background-image: url('../images/bg.png');
	background-position: top;
	background-repeat: repeat-x;
	background-attachment: fixed;
	font-size: 18px;
	font-family: "Courier New Bold", Courier, monospace;
	margin: 0;
	font-smooth: never;
	-webkit-font-smoothing: none;
}

p {
	line-height: 1.4em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
}

img {
	max-width: 100%;
	height: auto;
	padding: inherit;
  	margin:auto;
  	display: block;
}
.right {
	float: right;
	margin-left: 1em;
}
.left {
	float: left;
	margin-right: 1em;
}
.center {
	display: block;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
@media only screen and (min-width: 600px) {
	.small {
		max-width: 60%;
		height: auto;
	}
}
.caption {
	margin-top: 0;
	font-size: 0.9em;
	font-style: italic;
}

a {
	color: #474180;
}
a:hover {
	background-color: #A29AEC;
}

h1, h2, h3, h4, h5 {
	color: black;
}

hr {
	border-width: 2px 0 0 0;
	border-style: dashed;
	border-color: #8D86C9;
}

/*#CONTAINER is the rectangle that has contains everything but the background!*/
#container {
margin: 3em auto;
width: 100%;
max-width: 850px;
background-color: #CAC4CE;
color: #3d3942;
border-radius: 10px;
}

#content {
padding: 10px 5% 20px 5%;
justify-content: center;
align-items: center;
}


/*HEADER STYLE*/
#header {
background-color: #8D86C9;
border-radius: 10px     10px      0           0;
padding: 0 5%;
clip-path: polygon(0 0, 0 100%, 10% 90%, 20% 100%, 30% 90%, 40% 100%, 50% 90%, 60% 100%, 70% 90%, 80% 100%, 90% 90%, 100% 100%, 100% 0);
}

#header img{
float: right;
margin-right: 15px;
width: 80px;
}

#header ul {
display: inline-block;
list-style-type: none;
padding: 0;
margin-bottom: 1em;
margin-top: 1em;
}
#header li {
font-size: 1.2em;
display: inline-block;
margin-right: 0.2em;
margin-bottom: 0.8em;
margin-top: 0.8em;
}
#header li a {
color: white;
background-color: #242038;
border-width: 0.1em;
border-style: solid;
border-color: white;
border-radius: 8px;
padding: 0.3em 1.5em 0.2em 0.5em;
text-decoration: none;
font-weight: bold;
box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
}
#header li p {
color: white;
background-color: #242038;
border-width: 0.1em;
border-style: solid;
border-color: white;
border-radius: 8px;
padding: 0.3em 1.5em 0.2em 0.5em;
text-decoration: none;
font-weight: bold;
box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
}
#header li a:hover {
background-color: #242038;
border-color: #E2DF88;
color: #E2DF88
}
#header li a:active {
background-color: #DBD9AA;
border-color: #E2DF88;
color: black;
}

/*POST LIST STYLE*/
#postlistdiv ul {
font-size: 1.2em;
padding: 0;
list-style-type: none;
}
#recentpostlistdiv ul {
font-size: 1.2em;
padding: 0;
list-style-type: none;
}
.moreposts {
	font-size: 0.8em;
	margin-top: 0.2em;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
text-align: center;
margin-top: 1.4em;
}

/*DISQUS STYLE*/
#disqus_thread {
margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
font-size: 0.8em;
background-color: #8D86C9;
border-radius: 0     0      10px          10px;
padding: 0 5% 10px 5%;
clip-path: polygon(0 10%, 10% 0, 20% 10%, 30% 0, 40% 10%, 50% 0, 60% 10%, 70% 0, 80% 10%, 90% 0, 100% 10%, 100% 100%, 0 100%);
}