:root {
  --main-fg-color: #333;
  --main-bg-color: #eeecf3;
  --main-link-color: #704de0;
  --main-link-color-active: #3f19b6;
  --main-link-color-active-bg: none;
  --main-link-decor: underline;
  --main-heading-color: #333;
  --main-h1-color: #333;
  --main-blockquote-border: #bab2d5;
  --main-nav-link: #704de0;
  --main-nav-link-active: #fff;
  --main-nav-link-active-bg: #704de0;
  --main-nav-link-decor: none;
  }

@media (prefers-color-scheme: dark) {
  :root {
    --main-fg-color: #a5a5a9;
    --main-bg-color: #29292c;
    --main-link-color: #a387f7;
    --main-link-color-active: #fff;
    --main-link-color-active-bg: #7839e6;
    --main-link-decor: none;
    --main-heading-color: #ccc;
    --main-h1-color: #fff;
    --main-blockquote-border: #4a4266;
    --main-nav-link: #fff;
    --main-nav-link-active: #fff;
    --main-nav-link-active-bg: #7839e6;
    --main-nav-link-decor: none;
    }
  }

body { 
	margin: 2em auto;
	padding: 2em;
	font-family: Inter, Arial, Helvetica, sans-serif;
	color: var(--main-fg-color);
	background-color: var(--main-bg-color);
	line-height: 1.5;
	font-size: 1em;
	max-width: 1100px;
  }

a {
	color: var(--main-link-color);
	text-decoration: var(--main-link-decor);
  }

a:hover {
	color: var(--main-link-color-active); 
	background-color: var(--main-link-color-active-bg); 
	border-radius: 0.15rem;
  }

h1 { color: var(--main-h1-color); font-size: 2.2rem; font-weight: bold; }
h2, h3, h4, h5, h6 { 
  color: var(--main-heading-color);
  margin: 1.5rem 0 -0.5rem 0;
  }
h2 { font-size: 1.5rem; font-weight: bold; }
h3 { font-size: 1.2rem; font-weight: bold; }
h4 { font-size: 1.1rem; font-weight: bold; }
h5 { font-size: 1.15rem; font-weight: normal; }

h3#site-name a { font-weight: bold; color: var(--main-link-color); }
h3#site-name a:hover { background: none;}

/* buy me a coffee formatting */
#intro img { float: right; margin: 1em 0 1em 1em; }
footer { text-align: center; margin: auto; display: block; }

nav#main a { text-decoration: none; }
nav#main a.active { 
	color: var(--main-nav-link-active);
  background-color: var(--main-nav-link-active-bg); 
  text-decoration: var(--main-nav-link-decor);
  border-radius: 0.15rem;
  }
nav#main h3 {
	margin-bottom: 1rem;
	padding: 0;
	clear: both;
  }
nav#main ul a { 
  font-weight: bold;
  color: var(--main-nav-link); 
  padding: 0.5rem;
  margin: 0 0.5rem;
  }
nav#main ul {
	float: right;
	list-style-type: none;
	margin: 0 0 1.5rem 0;
	padding: 0;
  }
nav#main li {
	display: inline;
	margin: 0;
	padding: 0;
  }

aside h2 { font-weight: normal; }
nav#TableOfContents { margin-bottom: 2rem; }
nav#TableOfContents a { text-decoration: none; }
nav#TableOfContents ul {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
  }
nav#TableOfContents ul li {
	font-weight: bold;
  }
nav#TableOfContents ul ul {
	list-style-type: circle;
	padding: 0.5rem 2rem;
  }
nav#TableOfContents ul ul li {
	font-weight: normal;
  }

div#content { clear: both; }

blockquote {
  margin-left: 2rem;
  padding: 0 1rem;
  font-style: italic;
  border-left: var(--main-blockquote-border) solid 6px;
  }