chore: wire up main stylesheet and adjust import paths in HTML

css/partials/base.css

@@ -1,94 +1,82 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 
 :root {
-  --bg-gradient-onyx: linear-gradient(
-    to bottom right,
-    hsl(240, 1%, 25%) 3%,
-    hsl(0, 0%, 19%) 97%
-  );
-  --bg-gradient-jet: linear-gradient(
-      to bottom right,
-      hsla(240, 1%, 18%, 0.251) 3%,
-      hsla(240, 2%, 11%, 0) 100%
-    ),
-    hsl(240, 2%, 13%);
-  --bg-gradient-yellow1: linear-gradient(
-    to bottom right,
-    hsl(45, 100%, 71%) 0%,
-    hsla(36, 100%, 69%, 0) 50%
-  );
-  --bg-gradient-yellow2: linear-gradient(
-      135deg,
-      hsla(45, 100%, 71%, 0.251) 0%,
-      hsla(35, 100%, 68%, 0) 59.86%
-    ),
-    hsl(240, 2%, 13%);
-  --border-gradient-onyx: linear-gradient(
-    to bottom right,
-    hsl(0, 0%, 25%) 0%,
-    hsla(0, 0%, 25%, 0) 50%
-  );
-  --text-gradient-yellow: linear-gradient(
-    to right,
-    hsl(45, 100%, 72%),
-    hsl(35, 100%, 68%)
-  );
-
-  --jet: hsl(0, 0%, 22%);
-  --onyx: hsl(240, 1%, 17%);
-  --eerie-black1: hsl(240, 2%, 13%);
-  --eerie-black2: hsl(240, 2%, 12%);
-  --smoky-black: hsl(0, 0%, 7%);
-  --white1: hsl(0, 0%, 100%);
-  --white2: hsl(0, 0%, 98%);
-  --orange-yellow-crayola: hsl(45, 100%, 72%);
-  --vegas-gold: hsl(45, 54%, 58%);
-  --light-gray: hsl(0, 0%, 84%);
-  --light-gray70: hsla(0, 0%, 84%, 0.7);
-  --bittersweet-shimmer: hsl(0, 43%, 51%);
-
-  --ff-poppins: "Poppins", sans-serif;
-
-  --fs1: 24px;
-  --fs2: 18px;
-  --fs3: 17px;
-  --fs4: 16px;
-  --fs5: 15px;
-  --fs6: 14px;
-  --fs7: 13px;
-  --fs8: 12px;
-
-  --fw300: 300;
-  --fw400: 400;
-  --fw500: 500;
-  --fw600: 600;
-
-  --shadow1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
-  --shadow2: 0px 16px 30px hsla(0, 0%, 0%, 0.25);
-  --shadow3: 0px 16px 40px hsla(0, 0%, 0%, 0.25);
-  --shadow4: 0px 25px 50px hsla(0, 0%, 0%, 0.15);
-  --shadow5: 0px 24px 80px hsla(0, 0%, 0%, 0.25);
-
-  --transition1: 0.25s ease;
-  --transition2: 0.5s ease-in-out;
+    --bg-gradient-onyx: linear-gradient(to bottom right,
+            hsl(240, 1%, 25%) 3%,
+            hsl(0, 0%, 19%) 97%);
+    --bg-gradient-jet: linear-gradient(to bottom right,
+            hsla(240, 1%, 18%, 0.251) 3%,
+            hsla(240, 2%, 11%, 0) 100%),
+        hsl(240, 2%, 13%);
+    --bg-gradient-yellow1: linear-gradient(to bottom right,
+            hsl(45, 100%, 71%) 0%,
+            hsla(36, 100%, 69%, 0) 50%);
+    --bg-gradient-yellow2: linear-gradient(135deg,
+            hsla(45, 100%, 71%, 0.251) 0%,
+            hsla(35, 100%, 68%, 0) 59.86%),
+        hsl(240, 2%, 13%);
+    --border-gradient-onyx: linear-gradient(to bottom right,
+            hsl(0, 0%, 25%) 0%,
+            hsla(0, 0%, 25%, 0) 50%);
+    --text-gradient-yellow: linear-gradient(to right,
+            hsl(45, 100%, 72%),
+            hsl(35, 100%, 68%));
+
+    --jet: hsl(0, 0%, 22%);
+    --onyx: hsl(240, 1%, 17%);
+    --eerie-black1: hsl(240, 2%, 13%);
+    --eerie-black2: hsl(240, 2%, 12%);
+    --smoky-black: hsl(0, 0%, 7%);
+    --white1: hsl(0, 0%, 100%);
+    --white2: hsl(0, 0%, 98%);
+    --orange-yellow-crayola: hsl(45, 100%, 72%);
+    --vegas-gold: hsl(45, 54%, 58%);
+    --light-gray: hsl(0, 0%, 84%);
+    --light-gray70: hsla(0, 0%, 84%, 0.7);
+    --bittersweet-shimmer: hsl(0, 43%, 51%);
+
+    --ff-poppins: "Poppins", sans-serif;
+
+    --fs1: 24px;
+    --fs2: 18px;
+    --fs3: 17px;
+    --fs4: 16px;
+    --fs5: 15px;
+    --fs6: 14px;
+    --fs7: 13px;
+    --fs8: 12px;
+
+    --fw300: 300;
+    --fw400: 400;
+    --fw500: 500;
+    --fw600: 600;
+
+    --shadow1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
+    --shadow2: 0px 16px 30px hsla(0, 0%, 0%, 0.25);
+    --shadow3: 0px 16px 40px hsla(0, 0%, 0%, 0.25);
+    --shadow4: 0px 25px 50px hsla(0, 0%, 0%, 0.15);
+    --shadow5: 0px 24px 80px hsla(0, 0%, 0%, 0.25);
+
+    --transition1: 0.25s ease;
+    --transition2: 0.5s ease-in-out;
 }
 
 /* Reset básico */
 *,
 *::before,
 *::after {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
 /* Elementos globales */
 a {
-  text-decoration: none;
+    text-decoration: none;
 }
 
 li {
-  list-style: none;
+    list-style: none;
 }
 
 img,
@@ -97,41 +85,41 @@ a,
 button,
 time,
 span {
-  display: block;
+    display: block;
 }
 
 button {
-  font: inherit;
-  background: none;
-  border: none;
-  text-align: left;
-  cursor: pointer;
+    font: inherit;
+    background: none;
+    border: none;
+    text-align: left;
+    cursor: pointer;
 }
 
 input,
 textarea {
-  display: block;
-  width: 100%;
-  background: none;
-  font: inherit;
+    display: block;
+    width: 100%;
+    background: none;
+    font: inherit;
 }
 
 /* Selección y foco */
 ::selection {
-  background: var(--orange-yellow-crayola);
-  color: var(--smoky-black);
+    background: var(--orange-yellow-crayola);
+    color: var(--smoky-black);
 }
 
 :focus {
-  outline-color: var(--orange-yellow-crayola);
+    outline-color: var(--orange-yellow-crayola);
 }
 
 /* Tipografía base */
 html {
-  font-family: var(--ff-poppins);
+    font-family: var(--ff-poppins);
 }
 
 /* Fondo global */
 body {
-  background: var(--smoky-black);
-}
+    background: var(--smoky-black);
+}