:root{
	--main-bg-color: rgb(15, 15, 15);
	--win-bg-color: rgb(0, 0, 0);
	--main-txt-color: rgb(170, 170, 170);
	--link-color: rgb(0, 150, 50);
	--link-color-light: rgb(0, 225, 85);
	--trim-color: rgb(20, 127, 40);
	--trim-color-dark: rgb(10, 60, 20);
}

body{
	background: var(--main-bg-color);
	color: var(--main-txt-color);
	display:grid;
	/* x axis */
	justify-items:center;
	/* y axis */
	/*align-items:start;*/
	grid-template-columns:33vw 33vw 33vw;
	grid-template-rows:auto max-content auto auto;
	grid-template-areas:
		"header	header	header	"
		"barhead barmid	bartail	"
		"main	main	main	"
		"footer	footer	footer	"
}

@media screen and (min-width:980px) {
body{
	background: var(--main-bg-color);
	color: var(--main-txt-color);
	display:grid;
	/* x axis */
	justify-items:center;
	grid-template-columns:auto auto 38rem auto auto;
	grid-template-rows:min-content max-content min-content min-content min-content min-content;
	grid-template-areas:
		"header	header	header	header	header"
		".	.	main	barhead ."
		".	.	main	barmid 	."
		".	.	main	bartail ."
		".	.	main	. 	."
		".	.	footer	.	."
}
}

/* Mobile only - make the font bigger */
@media (pointer: coarse) or (hover: none) {
body {
	font-size: 2rem;
}
}

a {
	color: var(--link-color);
}

article {
	background: var(--win-bg-color);
	padding: 1rem;
	border: 1px solid var(--trim-color-dark); 
	justify-self: stretch;
	align-self: stretch;
}
@media screen and (min-width:980px) {
article {
	justify-self: start;
	align-self: stretch;
	width:14rem;
}
}

article.barhead {
	grid-area:barhead ;
}
article.barmid {
	grid-area:barmid ;
}
article.bartail {
	grid-area:bartail ;
}

article.main{
	grid-area:main;
	/* x axis */
	justify-self:center;
	/* y axis */
	align-self:center;
	border: 1px solid var(--trim-color); 
	max-width: 98%;
	word-wrap: break-word;
}
@media screen and (min-width:980px) {
article.main{
	/* x axis */
	justify-self:end;
	/* y axis */
	align-self:center;
	width: 38rem;
}
}


header{
	grid-area:header;
	justify-self:stretch;

	padding: 1rem;
	text-align:center;
	background: var(--win-bg-color);
	border: 1px solid var(--trim-color-dark); 
}
footer{
	grid-area:footer;

	width: 80%;
	max-width: 38rem;
	padding: 1rem;
	text-align:center;
	background: var(--win-bg-color);
	border: 1px solid var(--trim-color-dark); 
}


code {
	display:flex;
	justify-content:center;
}

hr {
	margin-top:2rem;
	margin-bottom:0rem;
    overflow: visible; /* For IE */
    height: 30px;
    border-style: solid;
    border-color: white;
    border-width: 1px 0 0 0;
    border-radius: 20px;
	text-align:center;
}
hr:before { /* Not really supposed to work, but does */
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: white;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}

hr:after {
    content: "\AA5C";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: var(--win-bg-color);
}

img.articleblock{
	display:center;
	margin:0% 2%;
	max-width:90%;
}
p.articleblock{
	text-align:center;
	margin:10px auto;
}


table.dice-table {
	margin-left: auto;
	margin-right: auto;
	border: var(--trim-color); 
	/*	min-width: 250px*/
} 
.dice-table td {
	padding: 4px;
	margin: 3px;
	border: var(--trim-color);
	min-width:22px;
}
.dice-table th {
	background-color: var(--main-bg-color); 
	color: var(--main-txt-color);
	font-weight: bold;
}

.flex-item{
	margin-left:0;
	margin-right:0;
	text-align:center;
	position:relative;
	border: 3px solid #333;
	max-width:100%;
	min-height: 0;
	min-width: 0;
}

blockquote{
	background-color: var(--win-bg-color);
	color: var(--main-txt-color);
	padding: 4px;	
	margin: 8px;
	display:block;


	border: 1px solid var(--main-txt-color);
	border-left: 4px solid var(--link-color);
	line-height: 1.2
}

blockquote.admincomment{
	background-color:rgb(40,0,0);
	color:var(--link-color);
}