Updated pages to use the changed html elements

assets/css/project.css

@@ -0,0 +1,21 @@
+h1 {
+    font-family: 'Indie Flower', cursive;
+    font-size: 75px;
+    text-align: center;
+    color: var(--clr-primary-a60);
+}
+
+p {
+    font-family: Lexend, serif;
+    color: var(--clr-primary-a60);
+    width: fit-content;
+    margin: 8px auto 8px auto;
+    font-size: 24px;
+}
+
+@media (width <= 750px) {
+    p {
+        max-width: 90vw;
+        font-size: 20px;
+    }
+}

assets/css/projects.css

@@ -1,14 +1,66 @@
 .project {
     display: flex;
     flex-direction: column;
-    background-color: rgba(50,50,75,0.8);
+    background-image: radial-gradient(circle at top left, var(--clr-primary-a10), var(--clr-primary-a50));
     border-radius: 12px;
+    max-width: 40vw;
+    height: 250px;
+    margin: 8px auto 8px auto;
+    padding: 8px;
+}
+
+.project-info {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-content: center;
+    margin: 0 4px 4px 4px;
 }
 
 .project > h1 {
+    flex-grow: 1;
     color: white;
+    font-family: 'Indie Flower', cursive;
+    width: fit-content;
+    font-size: 40px;
+    margin: 8px;
 }
 
 .project-desc {
     color: white;
+    font-family: Lexend, serif;
+    width: fit-content;
+    margin: 0;
+}
+
+.project-view {
+    align-self: flex-end;
+    width: fit-content;
+    font-family: Lexend, serif;
+    text-align: right;
+}
+
+h1 {
+    font-family: 'Indie Flower', cursive;
+    font-size: 60px;
+    text-align: center;
+    color: var(--clr-primary-a60);
+}
+
+h2 {
+    font-family: 'Indie Flower', cursive;
+    font-size: 40px;
+    text-align: center;
+    color: var(--clr-primary-a60);
+}
+
+@media (width <= 750px) {
+    .project {
+        max-width: 80vw;
+        height: 150px;
+    }
+
+    h2 {
+        font-size: 24px;
+    }
 }