Re-structure CSSs

css/main.css

 @import url("/lib/fontawesome-free-6.5.2-web/css/all.min.css");
 
+/* ----------------------- Variables ----------------------- */
+
+:root {
+    --shadow-width: 2px;
+}
+
 .blue {
     --primary: #144a8b;
     --primary-light: #387bd0;
@@ -10,14 +16,7 @@
     --primary-light: #2aac6d;
 }
 
-:root {
-    --shadow-width: 2px;
-}
-
-::selection {
-    background-color: var(--primary-light);
-    color: white;
-}
+/* ---------------------- Scaffolding ---------------------- */
 
 body {
     margin: 0;
@@ -58,10 +57,61 @@ main {
     justify-items: center;
 }
 
+/* -------------------------- Text ------------------------- */
+
+::selection {
+    background-color: var(--primary-light);
+    color: white;
+}
+
 code {
     font-family: "Inconsolata", monospace;
 }
 
+a {
+    color: var(--primary);
+}
+
+/* ----------------------- Components ---------------------- */
+
+.box {
+    border-radius: 1em;
+    box-shadow: var(--shadow-width) var(--shadow-width) 5px rgba(0, 0, 0, 0.5);
+    background: radial-gradient(
+        circle,
+        rgba(255, 255, 255, 1) 0%,
+        rgba(255, 255, 255, 0.85) 100%
+    );
+}
+
+a.btn {
+    height: 10em;
+    width: 10em;
+
+    margin-bottom: var(--shadow-width);
+    margin-right: var(--shadow-width);
+
+    display: grid;
+
+    align-content: center;
+    justify-items: center;
+
+    row-gap: 1em;
+
+    text-decoration: none;
+}
+
+a.btn > i {
+    font-size: 200%;
+}
+
+a.btn:active {
+    margin: var(--shadow-width) 0 0 var(--shadow-width);
+    box-shadow: none;
+}
+
+/* ---------------------- Navigation ----------------------- */
+
 nav {
     display: grid;
     grid-template-columns: 1fr max-content;
@@ -105,6 +155,8 @@ nav ul li:hover a {
     border-color: var(--primary-light);
 }
 
+/* ------------------------- Stuff ------------------------- */
+
 .services {
     display: grid;
 
@@ -122,16 +174,6 @@ nav ul li:hover a {
     justify-items: center;
 }
 
-.box {
-    border-radius: 1em;
-    box-shadow: var(--shadow-width) var(--shadow-width) 5px rgba(0, 0, 0, 0.5);
-    background: radial-gradient(
-        circle,
-        rgba(255, 255, 255, 1) 0%,
-        rgba(255, 255, 255, 0.85) 100%
-    );
-}
-
 article:not(.services) {
     padding: 3em 4em;
 }
@@ -140,36 +182,6 @@ article h1 {
     font-size: 200%;
 }
 
-a {
-    color: var(--primary);
-}
-
-a.btn {
-    height: 10em;
-    width: 10em;
-
-    margin-bottom: var(--shadow-width);
-    margin-right: var(--shadow-width);
-
-    display: grid;
-
-    align-content: center;
-    justify-items: center;
-
-    row-gap: 1em;
-
-    text-decoration: none;
-}
-
-a.btn > i {
-    font-size: 200%;
-}
-
-a.btn:active {
-    margin: var(--shadow-width) 0 0 var(--shadow-width);
-    box-shadow: none;
-}
-
 .detail {
     display: block;
     color: rgba(255, 255, 255, 0.7);