From 7e55eaf457db7deeaba34c9b41e86c70321d1cfd Mon Sep 17 00:00:00 2001
From: Matt DeCamp <matt@mattdecamp.com>
Date: Mon, 5 Jun 2023 15:21:01 -0400
Subject: [PATCH] format changes

---
 src/assets/styles/main.css   | 419 +----------------------------------
 src/includes/styles/main.css | 286 +++++++++++++++++++-----
 2 files changed, 233 insertions(+), 472 deletions(-)

diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
index 1bae9aa..e5db313 100644
--- a/src/assets/styles/main.css
+++ b/src/assets/styles/main.css
@@ -1,418 +1 @@
-@charset "UTF-8";
-:root {
-  --test-var: #909090;
-  --background-color: #ffffff;
-  --background-color-secondary: #301e4e;
-  --background-color-tertiary: #ff6e6c;
-  --primary: #1f1135;
-  --secondary: #ff6e6c;
-  --text-primary: #1f1135;
-  --text-secondary: #ffffff;
-  --text-tertiary: #301e4e;
-  --link-color: #301e4e;
-  --tag-color: #301e4e;
-  --button-color: #ff636c;
-  --ratio: 1.2;
-  --s-5: calc(var(--s-4) / var(--ratio));
-  --s-4: calc(var(--s-3) / var(--ratio));
-  --s-3: calc(var(--s-2) / var(--ratio));
-  --s-2: calc(var(--s-1) / var(--ratio));
-  --s-1: calc(var(--s0) / var(--ratio));
-  --s0: 1rem;
-  --s1: calc(var(--s0) * var(--ratio));
-  --s2: calc(var(--s1) * var(--ratio));
-  --s3: calc(var(--s2) * var(--ratio));
-  --s4: calc(var(--s3) * var(--ratio));
-  --s5: calc(var(--s4) * var(--ratio));
-  --max-width: 1000px;
-}
-
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
-  margin: 0;
-}
-
-ul[role=list], ol[role=list] {
-  list-style: none;
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  min-height: 100vh;
-  text-rendering: optimizeSpeed;
-  line-height: 1.5;
-}
-
-a:not([class]) {
-  text-decoration-skip-ink: auto;
-}
-
-img, picture {
-  max-width: 100%;
-  display: block;
-}
-
-input, button, textarea, select {
-  font: inherit;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-} /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-html {
-  line-height: 1.15;
-  -webkit-text-size-adjust: 100%;
-}
-
-body {
-  margin: 0;
-}
-
-main {
-  display: block;
-}
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-
-pre {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-a {
-  background-color: rgba(0, 0, 0, 0);
-}
-
-abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-
-b, strong {
-  font-weight: bolder;
-}
-
-code, kbd, samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-small {
-  font-size: 80%;
-}
-
-sub, sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-img {
-  border-style: none;
-}
-
-button, input, optgroup, select, textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-}
-
-button, input {
-  overflow: visible;
-}
-
-button, select {
-  text-transform: none;
-}
-
-button, [type=button], [type=reset], [type=submit] {
-  -webkit-appearance: button;
-}
-
-button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-}
-
-progress {
-  vertical-align: baseline;
-}
-
-textarea {
-  overflow: auto;
-}
-
-[type=checkbox], [type=radio] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-[type=search] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-
-[type=search]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-
-details {
-  display: block;
-}
-
-summary {
-  display: list-item;
-}
-
-template {
-  display: none;
-}
-
-[hidden] {
-  display: none;
-}
-
-#layout {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  overflow: hidden;
-  background: linear-gradient(310deg, var(--background-color-tertiary), var(--background-color-tertiary) 20%, var(--background-color) 20%);
-}
-
-#main-container {
-  width: 90%;
-  max-width: var(--max-width);
-  margin: 0 auto;
-  padding-bottom: var(--s1);
-  flex: 1 0 auto;
-  overflow: hidden;
-}
-
-#main-container main {
-  max-width: 65ch;
-}
-
-h1 {
-  font-size: clamp(var(--s3), 3vw, var(--s4));
-  margin: 0 0 var(--s0);
-}
-
-h2 {
-  font-size: clamp(var(--s2), 3vw, var(--s3));
-}
-
-h3 {
-  font-size: clamp(var(--s1), 3vw, var(--s2));
-  margin: 0 0 var(--s-1);
-  font-style: italic;
-}
-
-h4 {
-  margin: var(--s-2) 0;
-  font-size: clamp(var(--s-0), 3vw, var(--s1));
-  text-transform: uppercase;
-}
-
-p {
-  margin-bottom: var(--s1);
-}
-
-ul {
-  margin-top: var(--s0);
-  margin-bottom: var(--s0);
-}
-
-a {
-  color: var(--link-color);
-}
-
-* {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Bitter", "Bookman Old Style", serif;
-}
-
-header {
-  min-width: 100%;
-}
-
-#header--container {
-  width: 90%;
-  max-width: var(--max-width);
-  padding: var(--s1) 0;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-items: left;
-  color: var(--text-primary);
-}
-
-#header--title a {
-  font-size: clamp(var(--s3), 3vw, var(--s4));
-  font-weight: 200;
-  background: linear-gradient(to right, var(--primary), var(--primary) 63%, var(--secondary) 63%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: rgba(0, 0, 0, 0);
-  text-decoration: none;
-}
-
-@media screen and (min-width: 48rem) {
-  #header--container {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-}
-footer {
-  width: 100%;
-  max-width: 100vw;
-  background: var(--background-color-secondary);
-  color: var(--text-secondary);
-}
-
-footer a {
-  color: var(--text-secondary);
-  text-decoration: none;
-}
-
-footer a:hover {
-  text-decoration: underline;
-}
-
-#footer--container {
-  width: 90%;
-  max-width: var(--max-width);
-  margin: 0 auto;
-  padding: var(--s2) 0;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-}
-
-nav ul {
-  padding: 0;
-  display: block;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  list-style-type: none;
-  gap: var(--s0) var(--s2);
-  font-size: var(--s0);
-}
-
-nav ul li::before {
-  content: "​";
-}
-
-nav ul li a {
-  color: var(--text-primary);
-  text-decoration: none;
-}
-
-nav ul li a:hover {
-  text-decoration: underline;
-}
-
-.nav--active {
-  text-decoration: underline;
-}
-
-@media screen and (min-width: 48rem) {
-  nav ul {
-    font-size: var(--s1);
-  }
-}
-#posts--list article {
-  margin-bottom: var(--s2);
-}
-
-.post--time {
-  font-size: clamp(var(--s-1), 3vw, var(--s0));
-  font-weight: 200;
-}
-
-.tags--container {
-  padding: var(--s-1) 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--s0);
-}
-
-.tag a {
-  padding: var(--s-2) var(--s-1);
-  color: var(--text-secondary);
-  text-decoration: none;
-  background: var(--background-color-secondary);
-}
-
-.icon {
-  fill: var(--text-secondary);
-  width: var(--s2);
-  height: var(--s2);
-}
-
-/*# sourceMappingURL=main.css.map */
+:root{--test-var: #909090;--background-color: #ffffff;--background-color-secondary: #301e4e;--background-color-tertiary: #ff6e6c;--primary: #1f1135;--secondary: #ff6e6c;--text-primary: #1f1135;--text-secondary: #ffffff;--text-tertiary: #301e4e;--link-color: #301e4e;--tag-color: #301e4e;--button-color: #ff636c;--ratio: 1.2;--s-5: calc(var(--s-4) / var(--ratio));--s-4: calc(var(--s-3) / var(--ratio));--s-3: calc(var(--s-2) / var(--ratio));--s-2: calc(var(--s-1) / var(--ratio));--s-1: calc(var(--s0) / var(--ratio));--s0: 1rem;--s1: calc(var(--s0) * var(--ratio));--s2: calc(var(--s1) * var(--ratio));--s3: calc(var(--s2) * var(--ratio));--s4: calc(var(--s3) * var(--ratio));--s5: calc(var(--s4) * var(--ratio));--max-width: 1000px}*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}#layout{display:flex;flex-direction:column;min-height:100vh;overflow:hidden;background:linear-gradient(310deg, var(--background-color-tertiary), var(--background-color-tertiary) 20%, var(--background-color) 20%)}#main-container{width:90%;max-width:var(--max-width);margin:0 auto;padding-bottom:var(--s1);flex:1 0 auto;overflow:hidden}#main-container main{max-width:65ch}h1{font-size:clamp(var(--s3),3vw,var(--s4));margin:0 0 var(--s0)}h2{font-size:clamp(var(--s2),3vw,var(--s3))}h3{font-size:clamp(var(--s1),3vw,var(--s2));margin:0 0 var(--s-1);font-style:italic}h4{margin:var(--s-2) 0;font-size:clamp(var(--s-0),3vw,var(--s1));text-transform:uppercase}p{margin-bottom:var(--s1)}ul{margin-top:var(--s0);margin-bottom:var(--s0)}a{color:var(--link-color)}*{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif}h1,h2,h3,h4,h5,h6{font-family:"Bitter","Bookman Old Style",serif}header{min-width:100%}#header--container{width:90%;max-width:var(--max-width);padding:var(--s1) 0;margin:0 auto;display:flex;flex-direction:column;flex-wrap:wrap;align-items:left;color:var(--text-primary)}#header--title a{font-size:clamp(var(--s3),3vw,var(--s4));font-weight:200;background:linear-gradient(to right, var(--primary), var(--primary) 63%, var(--secondary) 63%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);text-decoration:none}@media screen and (min-width: 48rem){#header--container{flex-direction:row;justify-content:space-between;align-items:center}}footer{width:100%;max-width:100vw;background:var(--background-color-secondary);color:var(--text-secondary)}footer a{color:var(--text-secondary);text-decoration:none}footer a:hover{text-decoration:underline}#footer--container{width:90%;max-width:var(--max-width);margin:0 auto;padding:var(--s2) 0;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}nav ul{padding:0;display:block;display:flex;flex-direction:row;flex-wrap:wrap;list-style-type:none;gap:var(--s0) var(--s2);font-size:var(--s0)}nav ul li::before{content:"​"}nav ul li a{color:var(--text-primary);text-decoration:none}nav ul li a:hover{text-decoration:underline}.nav--active{text-decoration:underline}@media screen and (min-width: 48rem){nav ul{font-size:var(--s1)}}#posts--list article{margin-bottom:var(--s2)}.post--time{font-size:clamp(var(--s-1),3vw,var(--s0));font-weight:200}.tags--container{padding:var(--s-1) 0;display:flex;flex-wrap:wrap;gap:var(--s0)}.tag a{padding:var(--s-2) var(--s-1);color:var(--text-secondary);text-decoration:none;background:var(--background-color-secondary)}.icon{fill:var(--text-secondary);width:var(--s2);height:var(--s2)}.test-class{background:#123456}
diff --git a/src/includes/styles/main.css b/src/includes/styles/main.css
index 1bae9aa..896b986 100644
--- a/src/includes/styles/main.css
+++ b/src/includes/styles/main.css
@@ -1,4 +1,7 @@
 @charset "UTF-8";
+/*---------------
+Main Style Sheet
+----------------*/
 :root {
   --test-var: #909090;
   --background-color: #ffffff;
@@ -27,102 +30,185 @@
   --max-width: 1000px;
 }
 
-*, *::before, *::after {
+/* Box sizing rules */
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
-body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
   margin: 0;
 }
 
-ul[role=list], ol[role=list] {
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role=list],
+ol[role=list] {
   list-style: none;
 }
 
+/* Set core root defaults */
 html {
   scroll-behavior: smooth;
 }
 
+/* Set core body defaults */
 body {
   min-height: 100vh;
   text-rendering: optimizeSpeed;
   line-height: 1.5;
 }
 
+/* A elements that don't have a class get default styles */
 a:not([class]) {
   text-decoration-skip-ink: auto;
 }
 
-img, picture {
+/* Make images easier to work with */
+img,
+picture {
   max-width: 100%;
   display: block;
 }
 
-input, button, textarea, select {
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
   font: inherit;
 }
 
+/* Remove all animations and transitions for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
+  *,
+  *::before,
+  *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
   }
-} /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+}
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/* Document
+   ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
 html {
-  line-height: 1.15;
-  -webkit-text-size-adjust: 100%;
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
+/* Sections
+   ========================================================================== */
+/**
+ * Remove the margin in all browsers.
+ */
 body {
   margin: 0;
 }
 
+/**
+ * Render the `main` element consistently in IE.
+ */
 main {
   display: block;
 }
 
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
 h1 {
   font-size: 2em;
   margin: 0.67em 0;
 }
 
+/* Grouping content
+   ========================================================================== */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
 hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
 }
 
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
 pre {
-  font-family: monospace, monospace;
-  font-size: 1em;
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Remove the gray background on active links in IE 10.
+ */
 a {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: transparent;
 }
 
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
 abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
 }
 
-b, strong {
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
   font-weight: bolder;
 }
 
-code, kbd, samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
+/**
+ * Add the correct font size in all browsers.
+ */
 small {
   font-size: 80%;
 }
 
-sub, sup {
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
@@ -137,94 +223,188 @@ sup {
   top: -0.5em;
 }
 
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove the border on images inside links in IE 10.
+ */
 img {
   border-style: none;
 }
 
-button, input, optgroup, select, textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
 }
 
-button, input {
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input { /* 1 */
   overflow: visible;
 }
 
-button, select {
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select { /* 1 */
   text-transform: none;
 }
 
-button, [type=button], [type=reset], [type=submit] {
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+[type=button],
+[type=reset],
+[type=submit] {
   -webkit-appearance: button;
 }
 
-button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
+/**
+ * Correct the padding in Firefox.
+ */
 fieldset {
   padding: 0.35em 0.75em 0.625em;
 }
 
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
 legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
 }
 
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
 progress {
   vertical-align: baseline;
 }
 
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
 textarea {
   overflow: auto;
 }
 
-[type=checkbox], [type=radio] {
-  box-sizing: border-box;
-  padding: 0;
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type=checkbox],
+[type=radio] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
 }
 
-[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
   height: auto;
 }
 
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
 [type=search] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
 }
 
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
 [type=search]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
 ::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
 }
 
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
 details {
   display: block;
 }
 
+/*
+ * Add the correct display in all browsers.
+ */
 summary {
   display: list-item;
 }
 
+/* Misc
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
 template {
   display: none;
 }
 
+/**
+ * Add the correct display in IE 10.
+ */
 [hidden] {
   display: none;
 }
@@ -245,7 +425,6 @@ template {
   flex: 1 0 auto;
   overflow: hidden;
 }
-
 #main-container main {
   max-width: 65ch;
 }
@@ -314,7 +493,7 @@ header {
   background: linear-gradient(to right, var(--primary), var(--primary) 63%, var(--secondary) 63%);
   background-clip: text;
   -webkit-background-clip: text;
-  -webkit-text-fill-color: rgba(0, 0, 0, 0);
+  -webkit-text-fill-color: transparent;
   text-decoration: none;
 }
 
@@ -331,12 +510,10 @@ footer {
   background: var(--background-color-secondary);
   color: var(--text-secondary);
 }
-
 footer a {
   color: var(--text-secondary);
   text-decoration: none;
 }
-
 footer a:hover {
   text-decoration: underline;
 }
@@ -363,16 +540,13 @@ nav ul {
   gap: var(--s0) var(--s2);
   font-size: var(--s0);
 }
-
 nav ul li::before {
   content: "​";
 }
-
 nav ul li a {
   color: var(--text-primary);
   text-decoration: none;
 }
-
 nav ul li a:hover {
   text-decoration: underline;
 }
@@ -415,4 +589,8 @@ nav ul li a:hover {
   height: var(--s2);
 }
 
+.test-class {
+  background: #123456;
+}
+
 /*# sourceMappingURL=main.css.map */