Move common css to base

assets/css/base.css

@@ -59,6 +59,54 @@
     object-fit: cover;
 }
 
+
+.header {
+    display: flex;
+    flex-direction: row;
+    height: 40px;
+    /* width: 100%; */
+    background-color: var(--clr-primary-a0);
+    border-radius: 8px;
+    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.2));
+    margin: 8px;
+}
+
+.name {
+    color: var(--clr-light-a0);
+    font-size: 18px;
+    margin: auto 0 auto 8px;
+    font-family: Lexend, serif;
+}
+
+.nav-buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    margin: 0 8px 0 auto;
+}
+
+.nav-button {
+    padding: 4px 8px 4px 8px;
+    border-radius: 8px;
+    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.2));
+    background-color: transparent;
+    color: white;
+    border: none;
+    font-size: 18px;
+    font-family: Lexend, serif;
+}
+
+.nav-button:hover {
+    text-decoration-line: underline;
+    text-decoration-style: wavy;
+    background-color: var(--clr-primary-a50);
+    color: purple;
+    text-decoration-color: purple;
+}
+
 body {
     background-color: #32004f;
     margin: 0;

assets/css/index.css

@@ -1,21 +1,3 @@
-.header {
-    display: flex;
-    flex-direction: row;
-    height: 40px;
-    /* width: 100%; */
-    background-color: var(--clr-primary-a0);
-    border-radius: 8px;
-    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.2));
-    margin: 8px;
-}
-
-.name {
-    color: var(--clr-light-a0);
-    font-size: 18px;
-    margin: auto 0 auto 8px;
-    font-family: Lexend, serif;
-}
-
 .intro {
     display: flex;
     flex-direction: column;
@@ -23,41 +5,6 @@
     max-width: 75vw;
 }
 
-.nav-buttons {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    margin: 0 8px 0 auto;
-}
-
-.nav-button {
-    padding: 4px 8px 4px 8px;
-    border-radius: 8px;
-    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.2));
-    background-color: transparent;
-    color: white;
-    border: none;
-    font-size: 18px;
-    font-family: Lexend, serif;
-}
-
-.nav-button:hover {
-    text-decoration-line: underline;
-    text-decoration-style: wavy;
-    background-color: var(--clr-primary-a50);
-    color: purple;
-    text-decoration-color: purple;
-}
-
-.note {
-    color: gray;
-    font-size: 18px;
-    text-align: center;
-}
-
 h1 {
     font-size: 68px;
     font-family: 'Indie Flower', cursive;