:root {
	--main-text-color: black;
	--main-bg-color: white;
	--main-transparent: rgba(0, 0, 0, .15);
	--main-small-text-color: rgba(0, 0, 0, .65);
	--header-box-color: rgba(41, 41, 41, 0.747);
}
@media (prefers-color-scheme: dark) {
	:root {
		--main-text-color: rgb(255, 255, 255);
		--main-bg-color: #360034;
		--main-transparent: rgba(255, 255, 255, .15);
		--main-small-text-color: rgba(255, 255, 255, .45);
	}
}


/* man, fuck CSS. my brain doesn't like looking at all of this. so messy. so inelegant. 

	anyway, in case i forget how to maintain this page:
		each item defined in brackets is just what markdown pulls from to make its stuff. for example, the body is just
		standard small text that is shown on the main page. H1, H2, ect. are all headers (of differing sizes).
		it's nothing like what you did for your capstone. just start playing with this code again if you forget how it works.
		you'll remember, probably.
*/
@font-face {
	font-family: 'pixelifysans';
	src: url('../fonts/pixelify-sans-v3-latin-regular.woff2');
}

body {
	line-height: 1.6;
	font-size: 24px;
	font-family: 'pixelifysans', sans-serif; /* custom font that's given too much fkn trouble */
	background: var(--main-bg-color);
	background-image: url('../images/bg_image4.gif');
	background-color: rgba(69, 0, 97, 0.616); /*do any of my colors follow international standards for accessibility? nope. I'll do it later.*/
	background-blend-mode: multiply;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	-webkit-background-size: cover; /*is this bloaty or is this just putting into place redundancy? I wouldn't fkn know LOL*/
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	color: var(--main-text-color);
	padding-left: calc(100vw - 100%);
}
h1 {
	margin-block-start: 0.67rem;
	margin-block-end: 0.67rem;
	font-size: 2.00rem;
	font-weight: bold;
}
article h1:first-of-type {
	margin-block-start: 1.67rem;
}
h2 {
	margin-block-start: 0.83rem;
	margin-block-end: 0.83rem;
	font-size: 1.50rem;
	font-weight: bold;
}
h3 {
	margin-block-start: 1rem;
	margin-block-end: 1rem;
	font-size: 1.17em;
	font-weight: bold;
}
h4 {
	margin-block-start: 1.33rem;
	margin-block-end: 1.33rem;
	font-size: 1.00rem;
	font-weight: bold;
}
article h1 + h4:first-of-type {
	margin-block-start: 0rem;
}
h5 {
	margin-block-start: 1.67rem;
	margin-block-end: 1.67rem;
	font-size: 0.83rem;
	font-weight: bold;
}
h6 {
	margin-block-start: 2.33rem;
	margin-block-end: 2.33rem;
	font-size: 0.67rem;
	font-weight: bold;
}
a {
	color: var(--main-text-color);
}
a:hover {
	background: var(--main-transparent);
}
img {
	width: 100%;
	height: auto;
}
.webring {
	background-color: var(--main-bg-color);
}
blockquote {
	color: var(--main-small-text-color);
	border-left: 3px solid var(--main-transparent);
	padding: 0 1rem;
	margin-left: 0;
	margin-right: 0;
}
hr {
	border: none;
	height: 1px;
	background: var(--main-small-text-color);
}
code {
	background: var(--main-transparent);
	border-radius: .1875rem;
	/* padding: .0625rem .1875rem; */
	/* margin: 0 .1875rem; */
}
small {
	font-size: .95rem;
	color: var(--main-small-text-color);
}
#header ul { /* hierarchy: ul -> li -> li a | oh, and don't fucking touch this holy SHIT i hate CSS*/
	list-style-type: none;
	display: flex;
	padding-left: 0;
	justify-content: center;
}
#header li {
	display: inline;
	font-size: 24px;
	margin-left: 20px;
}
#header li a { /* hi charlie! i'm stealing a little bit of your code because i like those boxes. :P */
	color: white;
	background-color: var(--header-box-color);
	border-width: 2px;
	border-style: groove;
	border-radius: 5px;
	padding: 2px 4px;
	text-decoration: none;
	font-weight: bold;
	box-shadow: 2px 2px 2px 1px;
	text-align: center;
}
#header li a:hover {
	background-color: aqua;
	border-color: aquamarine;
}
#container { /* rectangle generated on each page to hold all the goodies. */
	margin: 3.5rem auto;
	width: 90%;
	max-width: 80ch;
	background-color: rgba(42, 2, 58, 0.856);
	border-radius: 10px;
	border-style: solid;
	padding-left: 25px;
	padding-right: 25px;
}
#postlistdiv ul {
	list-style-type: none;
	padding-left: 0;
}
.moreposts {
	font-size: .95rem;
	padding-left: 0.5rem;
}
#nextprev {
	text-align: center;
	margin-top: 1.4rem;
	font-size: .95rem;
}
#footer {
	color: var(--main-small-text-color);
	font-size: 14px;
}