diff --git a/src/scss/components/_superminimal.scss b/src/scss/components/_superminimal.scss
new file mode 100644
index 0000000..bbf36ab
--- /dev/null
+++ b/src/scss/components/_superminimal.scss
@@ -0,0 +1,371 @@
+/* ------------------------------------ *\
+    https://codepen.io/mikemai2awesome/full/KKvMZVz
+\* ------------------------------------ */
+  
+:root {
+    color: var(--text);
+    background-color: var(--background);
+    accent-color: var(--text);
+  }
+    
+  :where(a) {
+    color: var(--text);
+  }
+    
+  :where(input, textarea, select) {
+    color: var(--text);
+    background-color: var(--background);
+  }
+    
+  :where(button, .btn) {
+    color: var(--primary-light);
+    background-color: var(--text);
+  }
+    
+  :where(code) {
+    color: var(--text);
+    background-color: var(--primary-dark);
+  }
+    
+  /* ------------------------------------ *\
+      Typography
+  \* ------------------------------------ */
+    
+  :root {
+    font-size: clamp(
+      var(--font-size),
+      var(--font-size) * 0.9 + 0.25vw,
+      var(--font-size) * 2
+    ); // % ensures browser zoom is supported. 
+    font-family: var(--font); // Use system UI font. 
+    font-weight: var(--font-weight-regular);
+    line-height: var(--leading); // Standard leading for good legibility. 
+    letter-spacing: var(--tracking);
+  }
+    
+  :where(a) {
+    text-decoration: underline;
+    text-decoration-thickness: var(--border-width);
+    text-underline-offset: calc(var(--border-width) * 2);
+  }
+    
+  :where(a):hover {
+    text-decoration-thickness: calc(var(--border-width) * 2);
+  }
+    
+  :where(pre, code, kbd, dl, figcaption, abbr, table) {
+    font-family: var(--font-code); // Differentiate preformatted, code, description, and table text from body text. 
+    font-size: 0.8em; // Make monospace and small text smaller than body text. 
+  }
+    
+  :where(pre code) {
+    display: block; // Define block code.
+    font-size: 1em; // Prevent cascading.
+  }
+    
+  :where(blockquote, em, i, cite) {
+    font-family: var(--font-italic); // Differentiate blockquote, citation, idiomatic, and emphasisized text from body text. Also, sans-serif italic is ugly.
+    font-weight: var(--font-weight-regular); // Prevent italics to be bold. Bold italic is also ugly and unnecessary.
+  }
+    
+  :where(blockquote) {
+    font-size: clamp(1.5rem, 1.25rem + 1vw, 3rem);
+    letter-spacing: 0;
+  }
+    
+  :where(blockquote p) {
+    max-inline-size: 35ch;
+  }
+    
+  :where(blockquote q):before {
+    position: absolute;
+    transform: translateX(-100%);
+  }
+    
+  :where(strong, b, th, button, .btn) {
+    font-weight: var(--font-weight-semibold); // Make non-heading emphasized text less bold than heading text.
+  }
+    
+  :where(h1, h2, h3, h4, h5, h6, summary strong, legend) {
+    font-weight: var(--font-weight-semibold);
+  }
+    
+  :where(h1, h2, h3, h4, h5, h6, summary strong, legend) {
+    font-stretch: var(--font-stretch, expanded);
+  }
+    
+  :where(button, .btn, input[type="file"]) {
+    font-stretch: var(--font-stretch, condensed);
+  }
+    
+  :where(abbr) {
+    text-decoration: underline;
+    text-decoration-style: dotted; // Differentiate abbreviaions from links.
+    text-underline-offset: calc(var(--border-width) * 2);
+  }
+    
+  :where(button, label, select, summary) {
+    cursor: pointer;
+  }
+    
+  :where(summary:hover > *) {
+    text-decoration: underline;
+    text-underline-offset: calc(var(--border-width) * 2);
+  }
+    
+  :where(figcaption) {
+    text-align: center;
+  }
+    
+  :where(th) {
+    text-align: start;
+  }
+    
+  :where(th, td) {
+    vertical-align: baseline;
+  }
+    
+  :where(fieldset > ol) {
+    list-style: none;
+  }
+    
+  /* ------------------------------------ *\
+      Spacing
+  \* ------------------------------------ */
+    
+  :where(h1, h2, h3, h4, h5, h6, p, figure, form, pre, blockquote, ul, ol, dl, li, details) {
+    margin-block-end: 0;
+  }
+    
+  :where(h1, h2, h3, h4, h5, h6) {
+    margin-block-start: calc(var(--stack) * 1.75);
+  }
+  
+  :where(p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details) {
+    margin-inline: 0;
+    margin-block-start: var(--stack);
+  }
+  
+  :where(h1, h2, h3, h4, h5, h6, p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details):first-child,
+  :where(legend + *) {
+    margin-block-start: 0;
+  }
+  
+  :where(h1, h2, h3, h4, h5, h6) + * {
+    margin-block-start: calc(var(--stack) / 5);
+  }
+    
+  :where(ul, ol) {
+    padding: 0;
+  }
+    
+  :where(li > ul, li > ol) {
+    margin-block-start: calc(var(--stack) / 5);
+  }
+  
+  :where(details ul, details ol) {
+    margin-inline-start: 4ch; // Unify indent for all lists inside details.
+  }
+  
+  :where(li > ul, li > ol, fieldset ul, fieldset ol) {
+    margin-inline-start: 2.25ch; // Unify indent for all nested lists.
+  }
+  
+  :where(li + li) {
+    margin-block-start: calc(var(--stack) / 5);
+  }
+  
+  :where(fieldset > ol li + li) {
+    margin-block-start: calc(var(--stack) / 2);
+  }
+  
+  :where(fieldset > ol) {
+    margin-inline: 0;
+  }
+  
+  :where(hr) {
+    margin-block-start: calc(var(--stack) * 3);
+    margin-block-end: calc(var(--stack) * 3);
+  }
+  
+  :where(hr + *) {
+    margin-block-start: 0;
+  }
+  
+  :where(figure > img, table) {
+    margin-inline: auto;
+  }
+  
+  :where(blockquote > *) {
+    margin-block-start: calc(var(--stack) / 4);
+  }
+  
+  :where(blockquote:not(:last-child)) {
+    padding-block-end: calc(var(--stack) / 2);
+  }
+  
+  :where(button, .btn, dd, th, td) {
+    // Unify inset spacing on bordered elements.
+    padding-block: calc(var(--stack) / 6);
+    padding-inline: calc(var(--gutter) / 3);
+  }
+  
+  :where(input, textarea) {
+    padding-inline: 2px;
+  }
+  
+  :where(caption, figcaption) {
+    padding-block: calc(var(--stack) / 2);
+  }
+  
+  :where(code, kbd) {
+    padding-block: 0.25ex;
+    padding-inline: 0.5ch;
+  }
+  
+  :where(figure, pre) {
+    padding-block-start: calc(
+      var(--stack) / 2.5
+    ); // Line up top of images/codeblocks with text in an adjacent column layout.
+  }
+  
+  :where(pre) {
+    padding-block-end: calc(var(--stack) / 2.5);
+  }
+  
+  :where(pre code) {
+    padding-block: var(--stack);
+    padding-inline: var(--gutter);
+  }
+  
+  details[open] summary + * {
+    margin-block-start: calc(var(--stack) / 4);
+  }
+    
+  /* ------------------------------------ *\
+      General
+  \* ------------------------------------ */
+    
+  *,
+  *:before,
+  *:after {
+    font-feature-settings: "kern";
+    font-kerning: normal;
+    -moz-osx-font-smoothing: grayscale !important;
+    -webkit-font-smoothing: antialiased !important;
+    box-sizing: border-box;
+  }
+  
+  :where(input, textarea, select, fieldset, button, kbd, dd, table, th, td) {
+    // Unify border styles.
+    border: var(--border-width) solid var(--text);
+  }
+  
+  :where(input, textarea, select, fieldset, button, .btn, kbd) {
+    // Unify interactive elements border radius.
+    border-radius: var(--border-radius);
+  }
+  
+  :where(pre) {
+    white-space: -moz-pre-wrap;
+    white-space: -o-pre-wrap;
+    white-space: pre-wrap;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: break-word;
+  }
+  
+  :where(dl) {
+    display: grid;
+    grid-template-columns: auto minmax(75%, 1fr);
+    gap: calc(var(--gutter) / 2);
+    align-items: baseline;
+  }
+  
+  :where(dt) {
+    border-block-end: var(--border-width) dotted;
+  }
+  
+  :where(dd) {
+    block-size: 100%;
+    margin-inline-start: 0;
+  }
+  
+  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
+    display: block;
+    inline-size: 100%;
+  }
+  
+  :where(input[type="radio"], input[type="checkbox"]) {
+    size: 1.5ex;
+    vertical-align: baseline;
+  }
+  
+  :where(input[type="file"]) {
+    padding-inline: 0;
+    border: 0;
+  }
+  
+  ::-webkit-file-upload-button {
+    appearance: button;
+    cursor: pointer;
+    font: inherit;
+  }
+  
+  :where(input, textarea, select) ~ * {
+    margin-block-start: 0;
+    font-size: 0.8em;
+  }
+  
+  :where(input:required + mark) {
+    display: none;
+    color: var(--text);
+    background-color: transparent;
+  }
+  
+  :where(input:required:invalid + mark) {
+    display: block;
+  }
+  
+  :where(hr) {
+    block-size: 0;
+    border: 0;
+    border-block-start: var(--border-width) dashed var(--text);
+  }
+  
+  :where(figure, figure table) {
+    inline-size: 100%;
+  }
+  
+  :where(figure) {
+    overflow-x: auto;
+  }
+  
+  :where(figure > img) {
+    display: block;
+  }
+  
+  :where(table) {
+    caption-side: bottom;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  
+  :where(tr > *:first-child) {
+    white-space: nowrap;
+  }
+  
+  :where(summary > *) {
+    display: inline;
+    vertical-align: middle;
+  }
+    
+  /* ------------------------------------ *\
+      Add-ons
+      - Requires data attributes.
+      - Remove to do your own layouts.
+  \* ------------------------------------ */
+  
+  :where(body main) {
+    padding-block-start: clamp(var(--stack) * 1, 10vmax, var(--stack) * 2);
+  }
\ No newline at end of file
diff --git a/src/scss/components/_variables.scss b/src/scss/components/_variables.scss
index 14041bb..ba0d492 100644
--- a/src/scss/components/_variables.scss
+++ b/src/scss/components/_variables.scss
@@ -2,12 +2,15 @@
   --light-1: #efefef;
   --dark-1: #1e1e1e;
   --dark-2: #0f0f0f;
-  --primary: #C2B280;
-  --primary-light: #D3C7A2;
-  --primary-dark: #BAB298;
-  --secondary: #B3CF99;
-  --secondary-light: #C2D9AD;
-  --secondary-dark: #9FAF8F;
+
+  --primary-hsl: 45, 35%, 63%;
+  --primary: hsl(var(--primary-hsl));
+  --primary-light: hsl(45, 36%, 73%);
+  --primary-dark: hsl(46, 20%, 66%);
+  --secondary-hsl: 91, 36%, 71%;
+  --secondary: hsl(var(--secondary-hsl));
+  --secondary-light: hsl(91, 37%, 76%);
+  --secondary-dark: hsl(90, 17%, 62%);
 
   --background: var(--primary-light);
   --text: var(--dark-1);
diff --git a/src/scss/critical.scss b/src/scss/critical.scss
index 4c6afe0..e98b7be 100644
--- a/src/scss/critical.scss
+++ b/src/scss/critical.scss
@@ -1,683 +1,273 @@
 @use './components/variables';
 @use './components/reset';
+@use './components/superminimal';
 @use './components/utilities';
 @use './components/focus';
 @use './components/button';
 @use './components/skip-link';
 
+body {
+  --start: var(--primary-light);
+  --end: var(--secondary);
+  background: var(--start);
+  background: linear-gradient(180deg, var(--start) 0%, var(--start) 35%, var(--end) 100%);
 
+  header, footer {
+    padding: .5rem clamp(.2rem, 3vw, 2rem);  
+  }
+}
+header {
+  background-color: var(--primary);
+  position: fixed;
+  z-index: 10;
+  inset-block-start: 0;
+  inset-inline: 0;
 
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  /* ------------------------------------ *\
-     https://codepen.io/mikemai2awesome/full/KKvMZVz
-  \* ------------------------------------ */
-  
-  :root {
-      color: var(--text);
-      background-color: var(--background);
-      accent-color: var(--text);
-  }
-  
-  :where(a) {
-      color: var(--text);
-  }
-  
-  :where(input, textarea, select) {
-      color: var(--text);
-      background-color: var(--background);
-  }
-  
-  :where(button, .btn) {
-      color: var(--primary-light);
-      background-color: var(--text);
-  }
-  
-  :where(code) {
-      color: var(--text);
-      background-color: var(--primary-dark);
-  }
-  
-  /* ------------------------------------ *\
-      Typography
-  \* ------------------------------------ */
-  
-  :root {
-      font-size: clamp(
-          var(--font-size),
-          var(--font-size) * 0.9 + 0.25vw,
-          var(--font-size) * 2
-      ); // % ensures browser zoom is supported. 
-      font-family: var(--font); // Use system UI font. 
-      font-weight: var(--font-weight-regular);
-      line-height: var(--leading); // Standard leading for good legibility. 
-      letter-spacing: var(--tracking);
-  }
-  
-  :where(a) {
-      text-decoration: underline;
-      text-decoration-thickness: var(--border-width);
-      text-underline-offset: calc(var(--border-width) * 2);
-  }
-  
-  :where(a):hover {
-      text-decoration-thickness: calc(var(--border-width) * 2);
-  }
-  
-  :where(pre, code, kbd, dl, figcaption, abbr, table) {
-      font-family: var(
-          --font-code
-      ); // Differentiate preformatted, code, description, and table text from body text. 
-  
-      font-size: 0.8em; // Make monospace and small text smaller than body text. 
-  }
-  
-  :where(big) {
-      font-size: 1.2em; // <big> is technically deprecated, but I love using it. This creates a fallback if a browser doesn't support it. 
-      letter-spacing: 0.006em;
-  }
-  
-  :where(pre code) {
-      display: block; // Define block code.
-      font-size: 1em; // Prevent cascading.
-  }
-  
-  :where(blockquote, em, i, cite) {
-      font-family: var(
-          --font-italic
-      ); // Differentiate blockquote, citation, idiomatic, and emphasisized text from body text. Also, sans-serif italic is ugly.
-      font-weight: var(
-          --font-weight-regular
-      ); // Prevent italics to be bold. Bold italic is also ugly and unnecessary.
-  }
-  
-  :where(blockquote) {
-      font-size: clamp(1.5rem, 1.25rem + 1vw, 3rem);
-      letter-spacing: 0;
-  }
-  
-  :where(blockquote p) {
-      max-inline-size: 35ch;
-  }
-  
-  :where(blockquote q):before {
-      position: absolute;
-      transform: translateX(-100%);
-  }
-  
-  :where(strong, b, th, button, .btn) {
-      font-weight: var(
-          --font-weight-semibold
-      ); // Make non-heading emphasized text less bold than heading text.
-  }
-  
-  :where(h1, h2, h3, h4, h5, h6, summary strong, legend) {
-      font-weight: var(--font-weight-semibold);
-  }
-  
-  :where(h1, h2, h3, h4, h5, h6, summary strong, legend, big) {
-      font-stretch: var(--font-stretch, expanded);
-  }
-  
-  :where(button, .btn, input[type="file"]) {
-      font-stretch: var(--font-stretch, condensed);
-  }
-  
-  :where(abbr) {
-      text-decoration: underline;
-      text-decoration-style: dotted; // Differentiate abbreviaions from links.
-      text-underline-offset: calc(var(--border-width) * 2);
-  }
-  
-  :where(button, label, select, summary) {
-      cursor: pointer;
-  }
-  
-  :where(summary:hover > *) {
-      text-decoration: underline;
-      text-underline-offset: calc(var(--border-width) * 2);
-  }
-  
-  :where(figcaption) {
-      text-align: center;
-  }
-  
-  :where(th) {
-      text-align: start;
-  }
-  
-  :where(th, td) {
-      vertical-align: baseline;
-  }
-  
-  :where(fieldset > ol) {
+  nav {
+    ul {
+      display: flex;
+      justify-content: flex-end;
+      padding: 0;
       list-style: none;
-  }
-  
-  /* ------------------------------------ *\
-     Spacing
-  \* ------------------------------------ */
-  
-  :where(h1, h2, h3, h4, h5, h6, p, figure, form, pre, blockquote, ul, ol, dl, li, details) {
-      margin-block-end: 0;
-  }
-  
-  :where(h1, h2, h3, h4, h5, h6) {
-      margin-block-start: calc(var(--stack) * 1.75);
-  }
-  
-  :where(p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details) {
-      margin-inline: 0;
-      margin-block-start: var(--stack);
-  }
-  
-  :where(h1, h2, h3, h4, h5, h6, p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details):first-child,
-  :where(legend + *) {
-      margin-block-start: 0;
-  }
-  
-  :where(h1, h2, h3, h4, h5, h6) + * {
-      margin-block-start: calc(var(--stack) / 5);
-  }
-  
-  // :where(ul, ol) {
-  // 	padding: 0;
-  // }
-  
-  :where(li > ul, li > ol) {
-      margin-block-start: calc(var(--stack) / 5);
-  }
-  
-  :where(details ul, details ol) {
-      margin-inline-start: 4ch; // Unify indent for all lists inside details.
-  }
-  
-  :where(li > ul, li > ol, fieldset ul, fieldset ol) {
-      margin-inline-start: 2.25ch; // Unify indent for all nested lists.
-  }
-  
-  :where(li + li) {
-      margin-block-start: calc(var(--stack) / 5);
-  }
-  
-  :where(fieldset > ol li + li) {
-      margin-block-start: calc(var(--stack) / 2);
-  }
-  
-  :where(fieldset > ol) {
-      margin-inline: 0;
-  }
-  
-  :where(hr) {
-      margin-block-start: calc(var(--stack) * 3);
-      margin-block-end: calc(var(--stack) * 3);
-  }
-  
-  :where(hr + *) {
-      margin-block-start: 0;
-  }
-  
-  :where(figure > img, table) {
-      margin-inline: auto;
-  }
-  
-  :where(blockquote > *) {
-      margin-block-start: calc(var(--stack) / 4);
-  }
-  
-  :where(blockquote:not(:last-child)) {
-      padding-block-end: calc(var(--stack) / 2);
-  }
-  
-  :where(button, .btn, dd, th, td) {
-      // Unify inset spacing on bordered elements.
-      padding-block: calc(var(--stack) / 6);
-      padding-inline: calc(var(--gutter) / 3);
-  }
-  
-  :where(input, textarea) {
-      padding-inline: 2px;
-  }
-  
-  :where(caption, figcaption) {
-      padding-block: calc(var(--stack) / 2);
-  }
-  
-  :where(code, kbd) {
-      padding-block: 0.25ex;
-      padding-inline: 0.5ch;
-  }
-  
-  :where(figure, pre) {
-      padding-block-start: calc(
-          var(--stack) / 2.5
-      ); // Line up top of images/codeblocks with text in an adjacent column layout.
-  }
-  
-  :where(pre) {
-      padding-block-end: calc(var(--stack) / 2.5);
-  }
-  
-  :where(pre code) {
-      padding-block: var(--stack);
-      padding-inline: var(--gutter);
-  }
-  
-  details[open] summary + * {
-      margin-block-start: calc(var(--stack) / 4);
-  }
-  
-  /* ------------------------------------ *\
-     General
-  \* ------------------------------------ */
-  
-  *,
-  *:before,
-  *:after {
-      font-feature-settings: "kern";
-      font-kerning: normal;
-      -moz-osx-font-smoothing: grayscale !important;
-      -webkit-font-smoothing: antialiased !important;
-      box-sizing: border-box;
-  }
-  
-  :where(input, textarea, select, fieldset, button, kbd, dd, table, th, td) {
-      // Unify border styles.
-      border: var(--border-width) solid var(--text);
-  }
-  
-  :where(input, textarea, select, fieldset, button, .btn, kbd) {
-      // Unify interactive elements border radius.
-      border-radius: var(--border-radius);
-  }
-  
-  :where(pre) {
-      white-space: -moz-pre-wrap;
-      white-space: -o-pre-wrap;
-      white-space: pre-wrap;
-      word-spacing: normal;
-      word-break: normal;
-      word-wrap: break-word;
-  }
-  
-  :where(dl) {
-      display: grid;
-      grid-template-columns: auto minmax(75%, 1fr);
-      gap: calc(var(--gutter) / 2);
-      align-items: baseline;
-  }
-  
-  :where(dt) {
-      border-block-end: var(--border-width) dotted;
-  }
-  
-  :where(dd) {
-      block-size: 100%;
-      margin-inline-start: 0;
-  }
-  
-  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
-      display: block;
-      inline-size: 100%;
-  }
-  
-  :where(input[type="radio"], input[type="checkbox"]) {
-      size: 1.5ex;
-      vertical-align: baseline;
-  }
-  
-  :where(input[type="file"]) {
-      padding-inline: 0;
-      border: 0;
-  }
-  
-  ::-webkit-file-upload-button {
-      appearance: button;
-      cursor: pointer;
-      font: inherit;
-  }
-  
-  :where(input, textarea, select) ~ * {
-      margin-block-start: 0;
-      font-size: 0.8em;
-  }
-  
-  :where(input:required + mark) {
-      display: none;
-      color: var(--text);
-      background-color: transparent;
-  }
-  
-  :where(input:required:invalid + mark) {
-      display: block;
-  }
-  
-  :where(hr) {
-      block-size: 0;
-      border: 0;
-      border-block-start: var(--border-width) dashed var(--text);
-  }
-  
-  :where(figure, figure table) {
-      inline-size: 100%;
-  }
-  
-  :where(figure) {
-      overflow-x: auto;
-  }
-  
-  :where(figure > img) {
-      display: block;
-  }
-  
-  :where(table) {
-      caption-side: bottom;
-      border-collapse: collapse;
-      border-spacing: 0;
-  }
-  
-  :where(tr > *:first-child) {
-      white-space: nowrap;
-  }
-  
-  :where(summary > *) {
-      display: inline;
-      vertical-align: middle;
-  }
-  
-  /* ------------------------------------ *\
-     Add-ons
-     - Requires data attributes.
-     - Remove to do your own layouts.
-  \* ------------------------------------ */
-  
-  :where(body main) {
-      padding-block-start: clamp(var(--stack) * 1, 10vmax, var(--stack) * 2);
-  }
-  
-  
-  
-  
-  
-  
-  
 
+      @media screen and (max-width: 767px) {
+        justify-content: start;
+        flex-direction: column;
+      }
+    }
+
+    li {
+      padding: 6px 20px;
+      padding: 6px clamp(10px, 3vw, 20px);
+      margin: 0;
+      text-align: end;
   
-  body {
-    --start: var(--primary-light);
-    --end: var(--secondary);
-    background: var(--start);
-    background: linear-gradient(180deg, var(--start) 0%, var(--start) 35%, var(--end) 100%);
-  
-    header, footer {
-      padding: .5rem clamp(.2rem, 3vw, 2rem);  
+      @media screen and (min-width: 768px) {
+        display: inline-block;
+      }
+    }
+
+    a[aria-current="page"] {
+      color: var(--text-2);
+      text-decoration: underline;
+      font-weight: var(--font-weight-semibold)
     }
   }
-  header {
-    background-color: var(--primary);
-    position: fixed;
-    z-index: 10;
-    inset-block-start: 0;
-    inset-inline: 0;
-  
-    @media screen and (max-width: 767px) {
-      &.wrapper-full {
-        nav {
-            grid-column: 1 / -1;
-        }
-      }
-    }
-  
-    nav {
-      ul {
-        display: flex;
-        justify-content: flex-end;
-        padding: 0;
-        list-style: none;
-  
-        @media screen and (max-width: 767px) {
-          justify-content: start;
-        }
-      }
-  
-      li {
-        padding: 6px 20px;
-        padding: 6px clamp(10px, 3vw, 20px);
-        margin: 0;
-    
-        @media screen and (min-width: 768px) {
-          display: inline-block;
-        }
-      }
-  
-      a[aria-current="page"] {
-        color: var(--text-2);
-        text-decoration: underline;
-        font-weight: var(--font-weight-semibold)
-      }
-    }
+}
+main {
+  margin: 0;
+  padding: 0;
+
+  h2 {
+    margin-block: 2rem 1rem;
+    font-size: calc(var(--font-size) * 1.6);
   }
-  main {
+  .list-inline {
+    --item-gap: 0;
     margin: 0;
     padding: 0;
-    h2 {
-      margin-block: 2rem 1rem;
-      font-size: calc(var(--font-size) * 1.6);
-    }
-    .list-inline {
-      --item-gap: 0;
-      margin: 0;
-      padding: 0;
-    }
-    ul:not(.list-inline) {
-      margin: 0;
-      padding: 0;
-      list-style-type: none;
-    }
-    li {
-      --item-separator: none;
-      margin: 0;
-      padding: 0;
-    }
   }
-  footer {
-    background-color: var(--secondary);
-    justify-items: center;
-    margin-block-start: 1.5rem;
-    .list-inline {
-      a {
-        text-decoration: underline;
-        --item-color: var(--text-2);
-      }
-    }
-  }
-  
-  i {
-    vertical-align: text-top;
-    fill: var(--fill-color, var(--primary-light));
-    display: inline-block;
-
-    svg {
-      aspect-ratio: 1;
-      font-size: 1.2rem;
-    }
-  }
-  
-  .hero-section {
-    height: 65vh;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .projects-section {
-    ul {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
-      gap: 1rem;
-    }
-  
-    li {
-      border-radius: var(--border-radius);
-      overflow: hidden;
-    }
-  
-    article {
-      --background: url('https://placehold.co/200x150');
-      position: relative;
-      height: 100%;
-      padding: .4rem;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      gap: 2.5rem;
-      z-index: 1;
-      background: var(--background);
-      background-repeat: no-repeat;
-      background-size: cover;
-    }
-  
-    a {
-      &:hover {
-        i {
-          fill: #3a3a3a;
-        }
-      }
-    }
-  
-    i {
-      --fill-color: var(--text);
-      transition: fill .2s ease-in-out;
-      text-align: center;
-    }
-  
-    .top {
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-    }
-  
-    .links {
-      display: flex;
-      gap: .35rem;
-      align-self: flex-end;
-    }
-  
-    .content {
-      padding: 1rem .4rem 0 .4rem;
-    }
-  }
-  
-  .about-section, 
-  .projects-section,
-  .experiences-section {
-    padding-block: 2rem;
-  }
-  .about {
-    display: flex;
-    gap: 2rem;
-    align-items: center;
-  
-    & > div:first-child {
-      inline-size: 30%;
-    }
-    & > div:last-child {
-      inline-size: 60%;
-    }
-    img {
-      margin: 1rem auto;
-      inline-size: 100%;
-      inline-size: clamp(200px, 100%, 400px);
-      aspect-ratio: 1;
-      border-radius: 100%;
-      border: 4px solid var(--primary-dark)
-    }
-    ul {
-      margin-block-start: 1rem;
-      gap: .2rem;
-    }
-  
-    @media screen and (max-width: 767px) {
-      flex-direction: column;
-  
-      & > div:first-child, & > div:last-child {
-        inline-size: 100%;
-      }
-  
-      img {
-        inline-size: clamp(200px, 50vw, 300px);
-        margin: 0 auto;
-      }
-    }
-  }
-  
-  .timeline {
-    display: flex;
-    flex-direction: column;
-    position: relative;
+  ul:not(.list-inline) {
+    margin: 0;
     padding: 0;
+    list-style-type: none;
+  }
+  li {
+    --item-separator: none;
+    margin: 0;
+    padding: 0;
+  }
+}
+footer {
+  background-color: var(--secondary);
+  justify-items: center;
+  margin-block-start: 1.5rem;
   
-    &:before {
+  .list-inline {
+    a {
+      text-decoration: underline;
+      --item-color: var(--text-2);
+    }
+  }
+}
+
+i {
+  vertical-align: text-top;
+  fill: var(--fill-color, var(--primary-light));
+  display: inline-block;
+
+  svg {
+    aspect-ratio: 1;
+    font-size: 1.2rem;
+  }
+}
+
+.hero-section {
+  height: 65vh;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  @media screen and (max-width: 767px) {
+    height: 85vh;
+  }
+}
+
+.projects-section {
+  ul {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    gap: 1rem;
+  }
+  li {
+    border-radius: var(--border-radius);
+    overflow: hidden;
+  }
+  article {
+    --background: url('https://placehold.co/200x150'); // Default background
+    position: relative;
+    height: 100%;
+    padding: .4rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 2.5rem;
+    z-index: 1;
+    background: var(--background);
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  a {
+    &:hover {
+      i {
+        fill: #3a3a3a;
+      }
+    }
+  }
+
+  i {
+    --fill-color: var(--text);
+    transition: fill .2s ease-in-out;
+    text-align: center;
+  }
+
+  .top {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .links {
+    display: flex;
+    gap: .35rem;
+    align-self: flex-end;
+  }
+
+  .content {
+    padding: 1rem .4rem 0 .4rem;
+  }
+}
+
+.about-section, 
+.projects-section,
+.experiences-section {
+  padding-block: 2rem;
+}
+.about {
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+
+  & > div:first-child {
+    inline-size: 30%;
+  }
+  & > div:last-child {
+    inline-size: 60%;
+  }
+  img {
+    margin: 1rem auto;
+    inline-size: 100%;
+    inline-size: clamp(200px, 100%, 400px);
+    aspect-ratio: 1;
+    border-radius: 100%;
+    border: 4px solid var(--primary-dark)
+  }
+  ul {
+    margin-block-start: 1rem;
+    gap: .2rem;
+  }
+
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
+
+    & > div:first-child, & > div:last-child {
+      inline-size: 100%;
+    }
+
+    img {
+      inline-size: clamp(200px, 50vw, 300px);
+      margin: 0 auto;
+    }
+  }
+}
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 0;
+
+  &:before {
+    content: '';
+    position: absolute;
+    inline-size: 6px;
+    background-color: var(--light-1);
+    inset: 0 0 0 1.5rem;
+    margin-inline-start: -3px;
+  }
+
+  li {
+    --size: 3rem;
+    position: relative;
+    margin: 1.4rem 0;
+    padding: 0 0 0 calc(var(--size) + .8rem);
+
+    &:first-child {
+      margin-top: 3rem;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+      margin-bottom: -10px;
+    }
+
+    &:after {
       content: '';
       position: absolute;
-      inline-size: 6px;
+      aspect-ratio: 1;
+      inline-size: var(--size);
       background-color: var(--light-1);
-      inset: 0 0 0 1.5rem;
-      margin-inline-start: -3px;
-    }
-  
-    li {
-      --size: 3rem;
-      position: relative;
-      margin: 1.4rem 0;
-      padding: 0 0 0 calc(var(--size) + .8rem);
-  
-      &:first-child {
-        margin-top: 3rem;
-      }
-  
-      &:last-child {
-        margin-bottom: 0;
-        margin-bottom: -10px;
-      }
-  
-      &:after {
-        content: '';
-        position: absolute;
-        aspect-ratio: 1;
-        inline-size: var(--size);
-        background-color: var(--light-1);
-        border: 6px solid var(--secondary-dark);
-        inset-inline-start: 0;
-        // inset-inline-start: .9rem;
-        inset-block-end: 50%;
-        transform: translateY(50%);
-        // inset-block-end: 0;
-        // inset-block-start: 1.5rem;
-        border-radius: 50%;
-        z-index: 1;
-      }
+      border: 6px solid var(--secondary-dark);
+      inset-inline-start: 0;
+      // inset-inline-start: .9rem;
+      inset-block-end: 50%;
+      transform: translateY(50%);
+      // inset-block-end: 0;
+      // inset-block-start: 1.5rem;
+      border-radius: 50%;
+      z-index: 1;
     }
   }
-  
-  .experiences-section {
-    p {
-      margin: 0;
-    }
+}
+
+.experiences-section {
+  p {
+    margin: 0;
   }
+}
   
 .download-section {
   text-align: center;