Distribute all the main.css styles to their own stylesheets and remove main.css

static/styles/root.css

@@ -1,8 +1,10 @@
 :root {
     --black: 0, 0, 0;
+    --sub-dk-gray: 16, 16, 16;
     --dk-gray: 32, 32, 32;
     --mid-gray: 128, 128, 128;
     --lt-gray: 223, 223, 223;
+    --super-lt-gray: 240, 240, 240;
     --white: 255, 255, 255;
 
     --lt-blue: 69, 212, 243;
@@ -24,18 +26,23 @@
     --header-box-shadow-color: var(--box-shadow-color);
 
     --font-family-body: Verdana, Helvetica, sans-serif;
-    --font-family-monospace: monospace;
+    --font-family-monospace: "Courier New", Courier, monospace;
     --font-family-heading: Museo_Slab, Tahoma, sans-serif;
-    --font-family-site-heading: /*Krungthep,*/ Museo_Slab, Tahoma, sans-serif;
+    --font-family-site-heading: Museo_Slab, Tahoma, sans-serif;
     --font-size-min: 7px;
     --font-size-max: 8px;
 
     --body-item-spacing: 1em;
+    --body-line-height: 1.4;
+    --body-header-line-height: 1.1;
+    --body-code-background-color: rgb(var(--super-lt-gray));
 
     --content-width: 80rem;
 
     --transition-duration: 0.7s;
 
+    --social-menu-padding: 1rem;
+    --menu-icon-size: 20px;
     --twitter-icon: url(/icons/twitter.svg);
     --github-icon: url(/icons/github.svg);
     --instagram-icon: url(/icons/instagram.svg);
@@ -48,6 +55,7 @@
         --foreground-header-color: rgb(var(--white));
         --separator-color: rgb(var(--dk-gray));
         --box-shadow-color: rgba(var(--dk-gray), 0.8);
+        --body-code-background-color: rgb(var(--dk-gray));
 
         --twitter-icon: url(/icons/twitter-dark.svg);
         --github-icon: url(/icons/github-dark.svg);
@@ -66,10 +74,24 @@ a:hover {
 }
 a:visited { color: none; }
 
+blockquote {
+    border-inline-start: 4px solid var(--separator-color);
+    padding-inline-start: 2rem;
+    margin-inline-start: 2rem;
+}
+
 body {
     color: var(--foreground-body-color);
     font-size: 2rem;
-    line-height: 1.2;
+    line-height: var(--body-line-height);
+}
+
+code {
+    background-color: var(--body-code-background-color);
+    border-radius: 0.25rem;
+    font-family: var(--font-family-monospace);
+    display: inline-block;
+    padding-inline: 0.6rem;
 }
 
 figcaption {
@@ -89,6 +111,11 @@ figure {
     width: 100%;
 }
 
+figure.bordered {
+    padding: 0.5rem;
+    border: 2px solid #eee;
+}
+
 figure a,
 figure a:hover {
     border: 0;
@@ -159,7 +186,8 @@ footer.site p + p {
 h1, h2, h3, h4, h5, h6 {
     color: var(--foreground-header-color);
     font-family: var(--font-family-heading);
-    margin-block: 1em 0.25em;
+    margin-block: 3.5rem 1rem;
+    line-height: var(--body-header-line-height);
 }
 
 html {
@@ -188,6 +216,7 @@ h1.site {
             radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%),
             radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%),
             radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%);
+        -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
     }
@@ -234,7 +263,7 @@ header.site .grid {
     display: grid;
     gap: 0.5em;
     grid-template-columns: max-content auto max-content;
-    grid-template-rows: max-content;
+    grid-template-rows: minmax(2em, min-content);
     grid-template-areas:
         "title menu social";
     max-width: var(--content-width);
@@ -306,13 +335,58 @@ nav.bulleted li::before {
 
 p {
     letter-spacing: 0.025em;
-    line-height: 1.4;
+    line-height: var(--body-line-height);
 }
 p { margin-block-end: var(--body-item-spacing); }
 p:last-child { margin-block-end: 0; }
 
+.social menu li + li {
+    margin-left: var(--social-menu-padding);
+}
+
+.social {
+    display: flex;
+    letter-spacing: 2px;
+    margin-left: auto;
+}
+
+.social a {
+    background-image: var(--url);
+    background-repeat: no-repeat;
+    background-size: var(--menu-icon-size);
+    display: block;
+    height: var(--menu-icon-size);
+    width: var(--menu-icon-size);
+}
+
+.social a span {
+    display: none;
+}
+
+.social > li + li:before {
+    color: var(--dark);
+    padding: 0 0.5rem;
+}
+
+.youtube iframe {
+    aspect-ratio: 16 / 9;
+    margin-bottom: -3px;
+    width: 100%;
+}
+
+.p5-sketch {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
 /** SYNTAX HIGHLIGHTING **/
 
+.highlight code {
+    background-color: inherit;
+    margin-block: 0.5em;
+}
+
 .highlight .line {
     display: grid;
     grid-template-columns: max-content auto;