chugging away, no i am not splitting this into fine-grained commits

css/main.css

@@ -3,10 +3,12 @@
 
 	--font-family: 'Atkinson Hyperlegible Next', sans-serif;
 	--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
+
 	--color-dark: #2e303e;
 	--color-dark-alt: #3c3f52;
 	--color-light: #ebeeef;
 	--color-light-alt: #dbe1e3;
+
 	--color-teal-dark: #18737b;
 	--color-teal-light: #25b0bc;
 	--color-pink-dark: #94195d;
@@ -47,8 +49,12 @@
 	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
 	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
 	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
+
+	--header-offset: 3.1rem;
 }
 
+/* Base */
+
 * {
 	box-sizing: border-box;
 	margin: 0;
@@ -59,6 +65,195 @@ body {
 	font-family: var(--font-family);
 	color: var(--color-text);
 	background-color: var(--color-bg);
-	max-width: 60vw;
-	margin: 0 auto;
 }
+
+main {
+	width: 60vw;
+	margin: 0 auto;
+	scroll-margin-top: var(--header-offset);
+}
+
+@media (max-width: 650px) {
+	main {
+		width: 92vw;
+	}
+}
+
+/* Headers */
+h1, h2, h3, h4, h5, h6 {
+	line-height: 1.25;
+	color: var(--color-teal);
+	scroll-margin-top: var(--header-offset);
+}
+
+h1 {
+	margin-top: 3rem;
+	font-size: 3.5rem;
+}
+h2 {
+	margin-top: 1rem;
+	font-size: 2.2rem;
+}
+h3 {
+	margin-top: 1.5rem;
+	font-size: 1.6rem;
+}
+h4, h5, h6 {
+	margin-top: 1rem;
+	font-size: 1.2rem;
+}
+
+/* Images */
+img {
+	display: block;
+	max-width: 100%;
+	height: auto;
+	border-radius: 1rem;
+}
+
+/* Paragraphs */
+p {
+	margin: 1.25rem 0;
+	line-height: 1.4;
+}
+
+strong,
+b {
+	font-weight: 900;
+}
+
+/* Links */
+a {
+	color: var(--color-font);
+	border-radius: 1rem;
+	text-decoration: underline;
+	text-decoration-style: solid;
+	text-decoration-thickness: .2em;
+	text-decoration-color: var(--color-teal);
+	transition: text-decoration-thickness .5s;
+	padding: 0 .1rem; /* These stop the focus outline from covering text */
+	margin: 0 .1rem;
+}
+
+a:focus-visible {
+	text-decoration: none;
+	outline: .15rem solid var(--color-teal);
+}
+
+@media (any-hover: hover) {
+	a:hover {
+		text-decoration-thickness: .4em;
+	}
+}
+
+a:active {
+	text-decoration-thickness: .4em;
+}
+
+/* Lists */
+::marker {
+	color: var(--color-pink);
+}
+
+ul, ol, li {
+	margin-left: 1rem;
+}
+
+li {
+	line-height: 1.5;
+}
+
+li ul, li ol {
+	margin: .5rem 0;
+}
+
+/* Blockquotes */
+blockquote {
+	margin: .5rem 1rem;
+	padding: 0 1rem;
+	border-radius: .25rem 1rem 1rem .25rem;
+	line-height: 1.25;
+	border-left: .5rem solid var(--color-pink);
+}
+
+blockquote,
+blockquote p,
+blockquote ol,
+blockquote ul {
+	background-color: var(--color-bg-alt);
+	padding: .5rem;
+}
+
+blockquote p {
+	margin: 0;
+}
+
+/* Tables */
+table {
+	width: 100%;
+	border-spacing: 0; /* border collapse doesn't play nice with radii */
+	border-radius: .3rem;
+	border: thin solid var(--color-pink);
+}
+
+th {
+	color: var(--color-bg);
+	background-color: var(--color-pink);
+}
+
+th, td {
+	padding: .5rem;
+	text-align: left;
+}
+
+tr:nth-child(even) { background-color: var(--color-bg-alt); }
+th:not(:first-child) { border-left: thin solid var(--color-bg); }
+th:first-child { border-top-left-radius: .25rem; }
+th:last-child { border-top-right-radius: .25rem; }
+td:not(:first-child) { border-left: thin solid var(--color-pink); }
+
+/* Code */
+/* Syntax highlighting in highlighting.css */
+code,
+pre {
+	font-family: var(--font-family-code);
+	background-color: var(--color-bg-alt);
+	font-size: .9rem;
+}
+
+code {
+	padding: .2rem;
+	border-radius: .25rem;
+}
+
+pre {
+	display: block;
+	margin: 1rem 0;
+	padding: 1rem;
+	line-height: 1.5;
+	white-space: pre-wrap;
+	word-break: break-word;
+	overflow-wrap: break-word;
+	tab-size: 4;
+	border-radius: .5rem;
+}
+
+pre code {
+	padding: 0;
+}
+
+/* Times */
+time {
+	color: var(--color-grey);
+}
+
+/* Horizontal rules */
+hr {
+	color: var(--color-teal);
+	border: .25rem solid var(--color-teal);
+	margin: 2rem 0;
+}
+hr:last-child {
+	margin-bottom: 0;
+}
+