:root
{
	--game-page-background: black;
	--game-text: white;
	
	--game-content-background: black;
	--game-content-border: white;
	--game-content-border-width: 2px;
	--game-content-border-radius: 10px;
	
	--game-box-background: black;
	--game-box-border: white;
	--game-box-text: var(--game-text);
	
	--game-seriesbox-border: white;
	--game-screen-border: rgba(255, 255, 255, .2);
	
	--game-link: #00AAFF;
	--game-link-visited: var(--game-link);
	--game-link-hover: white;
	--game-link-active: var(--game-link-hover);
	
	--game-divider: white;
	
	--game-spoiler: black;
}

body
{
	margin-left: auto;
	margin-right: auto;
	background-color: black; background-color: var(--game-page-background, black);
	color: white; color: var(--game-text, white);
	image-rendering: pixelated !important;
	image-rendering: -webkit-optimize-contrast !important;
	image-rendering: optimize-contrast !important;
	image-rendering: -o-crisp-edges !important;
	image-rendering: -moz-crisp-edges !important;
	image-rendering: crisp-edges !important;
}

div#main
{
	width: 740px;
	margin-left: auto;
	margin-right: auto;
	padding: 16px 32px;
	background-color: black; background-color: var(--game-content-background, black);
	border-style: solid;
	border-color: white; border-color: var(--game-content-border, white);
	border-width: 2px; border-width: var(--game-content-border-width, 2px);
	border-radius: 10px; border-radius: var(--game-content-border-radius, 10px);
}

p
{
	max-width: 740px;
	margin-left: auto;
	margin-right: auto;
}

hr
{
	margin-left: auto;
	background-color: white; background-color: var(--game-divider, white);
}

hr.dot
{
	background-color: transparent;
	border-bottom-width: 2px;
	border-style: dotted;
	border-color: white; border-color: var(--game-divider, white);
}

.box
{
	margin-left: auto;
	margin-right: auto;
	background-color: black; background-color: var(--game-box-background, black);
	border-color: white; border-color: var(--game-box-border, white);
	color: white; color: var(--game-box-text, white);
}

img.logo
{
	margin-left: auto;
	margin-right: auto;
	/* Alt text styling for if image doesn't load */
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	font-size: 32px; 
}

.screenshots
{
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start;
}
.screenshots img
{
	border-width: 1px;
	border-style: solid;
	border-color: white; border-color: rgba(255, 255, 255, .2); border-color: var(--game-screen-border, rgba(255, 255, 255, .2));
}

.series
{
	display: inline-block;
	padding: 10px;
	border-style: solid;
	border-width: 1px;
	border-color: white; border-color: var(--game-seriesbox-border, white);
}

ul, ol
{
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}
ul:not(.leftlist):not(.leftlist ul), ol:not(.leftlist):not(.leftlist ul) { list-style-position: inside; } /* Keep bullet points/numbers up next to text for centered lists */

.leftlist /* Used for both lists and divs I want left-aligned */
{
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.leftlist ul, .leftlist ol { margin-left: 0px; } /* For nested lists, don't allow margin-left to be auto */

details, summary
{
	margin-left: auto;
	margin-right: auto;
}

a[href] { color: #00AAFF; color: var(--game-link, #00AAFF); }
a:visited, summary, button:not(.nonlink) { color: #00AAFF; color: var(--game-link-visited, #00AAFF); }
a:hover, summary:hover, button:not(.nonlink):hover { color: white; color: var(--game-link-hover, white); }
a:active { color: white; color: var(--game-link-active, white); }

.hint, .hint a[href]:not(.show), .hint button:not(.show)
{
	color: black; color: var(--game-spoiler, black);
	background-color: black; background-color: var(--game-spoiler, black);
}

.hint.show { background-color: transparent; }
.hint.show:not(a[href]):not(button) { color: revert; }

@media (max-width: 832px)
{
	div#main
	{
		width: calc(100% - 40px) !important;
		padding: 16px 16px !important;
	}
	table { table-layout: fixed; }
	td { word-wrap: break-word; }
}