:root
{
	--background-blue: rgb(57, 57, 101); /* #393965 */
	--content-blue: rgb(42, 42, 85); /* #2A2A55 */
	--box-background: rgb(37, 37, 80); /* #252550 */
	--box-border: rgb(102, 102, 136); /* #666688 */
	
	--background-lightmode: rgb(142, 142, 166); /* #8E8EA6 */
	--content-lightmode: rgb(218, 218, 224); /* #DADAE0 */
	
	--link-blue: rgb(204, 192, 255); /* #CCC0FF */
	--link-visited: rgb(169, 160, 255); /* #A9A0FF */
	--link-hover: white;
	
	--link-lightmode: rgb(51, 51, 153); /* #333399 */
	--link-lightmode-visited: rgb(51, 51, 102); /* #333366 */
	--link-lightmode-hover: rgb(51, 102, 204); /* #3366CC */
	
	--redlink: rgb(233, 73, 73); /* #E94949 */
	--redlink-visited: rgb(213, 42, 42); /* #D52A2A */
	--redlink-hover: rgb(255, 96, 80); /* #FF6050 */
	
	--name-red: rgb(233, 137, 137); /* #E98989 */
	--name-lightmode: rgb(133, 42, 42); /* #852A2A */
	--darkish-gray: rgb(102, 102, 102); /* #666666 */
}

html { width: 100%; }

body
{
	background-color: #393965; background-color: var(--background-blue, #393965);
	color: white;
	font-size: 14px;
	line-height: 19px;
	font-family: sans-serif;
	text-align: center;
	padding: 10px;
	padding-bottom: 20px;
}
body.lightmode { background-color: #8E8EA6 !important; background-color: var(--background-lightmode, #8E8EA6) !important; }

.content
{
	display: inline-block;
	text-align: left;
	width: auto;
	margin: auto;
	max-width: 960px;
	padding: 20px 30px 20px 30px;
	background-color: #2A2A55; background-color: var(--content-blue, #2A2A55);
	border-color: rgba(255, 255, 255, .2);
	border-style: solid;
	border-width: 2px;
	border-radius: 8px;
}

.lightmode .content
{
	background-color: #DADAE0 !important; background-color: var(--content-lightmode, #DADAE0) !important;
	color: black;
}

/* Font-size-independent margins; margins class used for other tags that selectively want margins (i.e. box divs/tables) */
p, ul, ol, header, h1, h2, h3, h4, details, .margins
{
	margin-top: 19px;
	margin-bottom: 19px;
}

.spacer:not(.box) { padding-bottom: 19px; } /* Padding works even if element is empty */
.box.spacer { margin-bottom: 19px; } /* Spacer for box instead uses margin, since padding is within border */

/* No top margin if first child */
p:first-child, ul:first-child, ol:first-child,
header:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, details:first-child, .margins:first-child { margin-top: 0px; }
/* Whatever's after a nospace or equivalent should also not have margin above it */
.nospace + p, .nospace + ul, .nospace + ol, .nospace + details, .nospace + .margins,
h4 + p, h4 + ul, h4 + ol, h4 + details, h4 + .margins { margin-top: 0px; }
/* Class to forcibly remove top margin (unnecessary in most cases) */
.notop { margin-top: 0px !important; }

/* No bottom margin if last child */
p:last-child, ul:last-child, ol:last-child,
h1:last-child, h2:last-child, h3:last-child, details:last-child, .margins:last-child { margin-bottom: 0px; }
/* No bottom margin by default */
h4 { margin-bottom: 0px; }
/* Class to forcibly remove bottom margin */
.nospace { margin-bottom: 0px !important; }

.plist p /* plist div holds a list of unspaced ps */
{
	margin-top: 0px;
	margin-bottom: 0px;
}

ul, ol /* Set left margin and padding to be just enough for bullet point/number */
{
	margin-left: 0px;
	padding-left: 12px;
}
.spacedlist > li:not(:last-child) { margin-bottom: 19px; } /* spacedlist spaces out entries in the list (but only direct children, in case of nesting) */
.nobullet { list-style: none; }

details { width: fit-content; }

summary
{
	cursor: pointer;
	list-style: none;
	user-select: none;
	width: fit-content;
}
summary::marker, summary::-webkit-details-marker { display: none; }
summary+ .box { margin-top: 19px; } /* General rule to put a space between summary and box when details tag contains a box; can override with notop */

button
{
	background: none;
	border: none;
	padding: 0px;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-align: inherit;
	user-select: text;
}
button[onClick], form button { cursor: pointer; }

hr
{
	border: 0;
	height: 2px;
	margin-left: 0px;
	margin-right: auto;
	margin-top: 26px;
	margin-bottom: 26px;
	width: 50%;
	background-color: #666666; background-color: var(--darkish-gray, #666666);
}
hr.wide { width: 80%; }

img /* Ensure images shrink instead of sticking past bounds, and maintain aspect ratio */
{
	max-width: 100%;
	height: auto;
}
img.block { display: block; }
img.center { margin-left: auto; margin-right: auto; text-align: center; }
img:-moz-loading { color: transparent; } /* Hide alt text while loading in Firefox */

/* Position superscripts/subscripts relatively, particularly to avoid fractional text heights */
sup
{
	display: inline-block;
	vertical-align: top;
	position: relative;
	top: -4px;
}
sub
{
	display: inline-block;
	vertical-align: bottom;
	position: relative;
	top: 4px;
}

/* Special container types/general classes */

/* indent div indents paragraphs but not proper headings, and reduces gap between header and following paragraph to 6 pixels */
.indent p, .indent h4 { margin-left: 10px; }
.indent h2 + p, .indent h3 + p, .indent h2 + .plist, .indent h3 + .plist { margin-top: -12px; }

.box
{
	background-color: #252550; background-color: var(--box-background, #252550);
	border: 2px solid #666688; border: 2px solid var(--box-border, #666688);
	padding: 10px;
}

.bubble
{
	background-color: rgba(0, 0, 0, .15);
	border-radius: 8px;
	padding: 16px;
	width: fit-content;
}

.toggle { display: none; } /* General class to hide elements, so that they can be easily toggled just by adding/removing the class */
.toggle div.box { display: inline-block; }

/* Colors, sizes, and styles */

.name { color: #E98989; color: var(--name-red, #E98989); }
.lightmode .name { color: #852A2A; color: var(--name-lightmode, #852A2A); }

.size0 { font-size: 8px; line-height: 11px; }
.size1 { font-size: 11px; line-height: 15px; }
.comment { font-size: 11px; line-height: 15px; font-style: italic; }
.size2 { font-size: 12px; line-height: 16px; }
h4 { font-size: inherit; line-height: inherit; font-weight: bold; } /* h4 for minor headings that keep regular font size and have no bottom margin by default */
.size3, h3 { font-size: 16px; line-height: 22px; font-weight: bold; } /* h3 for most headings within a page */
.size4, h2 { font-size: 18px; line-height: 24px; font-weight: bold; } /* h2 for large subcategories of page */
.size5, h1 { font-size: 24px; line-height: 32px; font-weight: bold; } /* h1 almost always for singular title at top of page */
.size6 { font-size: 32px; line-height: 44px; font-weight: bold; } /* Rarely-used larger version of h1 */
.italic { font-weight: normal; font-style: italic; } /* Default to normal weight even when used with headers, though if bold class is also specified, that should override */
.bold { font-weight: bold; }

i em, .italic em, .comment em { font-style: normal; } /* Unintalicize for emphasis within italics */

a { text-decoration: none; }
a:link { color: #CCC0FF; color: var(--link-blue, #CCC0FF); }
a:visited, summary, button:not(.nonlink) { color: #A9A0FF; color: var(--link-visited, #A9A0FF); }
a:hover, a:active, summary:hover, button:not(.nonlink):hover { color: white; color: var(--link-hover, white); }

.lightmode a:link { color: #333399; color: var(--link-lightmode, #333399); }
.lightmode a:visited, .lightmode summary, .lightmode button:not(.nonlink) { color: #333366; color: var(--link-lightmode-visited, #333366); }
.lightmode a:hover, .lightmode a:active, .lightmode summary:hover, .lightmode button:not(.nonlink):hover { color: #3366CC; color: var(--link-lightmode-hover, #3366CC); }

.redlink, .redlink a:link, a.redlink, a:link.redlink { color: #E94949; color: var(--redlink, #E94949); }
.redlink a:visited, a:visited.redlink { color: #D52A2A; color: var(--redlink-visited, #D52A2A); }
.redlink a:hover, a:hover.redlink, .postname a:active { color: #FF6050; color: var(--redlink-hover, #FF6050); }

.monospace { font-family: monospace; }

@media (max-width: 800px)
{
	body
	{
		margin-left: 0px !important;
		margin-right: 0px !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
	.content
	{
		max-width: calc(100% - 40px) !important;
		padding: 16px !important;
	}
	td { word-wrap: anywhere; }
	br.extra { display: none !important; } /* Linebreaks for formatting that don't make sense at low width */
}