Changed heading colors and sizes

Author: divyansh0x0

app/assets/css/main.css

@@ -9,10 +9,12 @@
     -webkit-tap-highlight-color: transparent;
 
 }
-html{
+
+html {
     overflow-x: hidden;
     font-size: 1rem;
 }
+
 body {
     background-color: var(--color-surface);
     color: var(--color-on-surface);
@@ -22,16 +24,40 @@ body {
     overflow-x: hidden;
 }
 
-h1{
-    font-size:6rem;
-}
-h2{
-    font-size:3rem;
-}
-h1,h2,h3,h4,h5,h6{
+
+h1,
+h2,h3 {
     color: var(--color-primary);
     user-select: none;
 }
+
+h4,
+h5,
+h6 {
+    color: var(--color-secondary);
+    user-select: none;
+}
+
+h1 {
+    font-size: 6rem;
+}
+
+h2 {
+    font-size: 4rem;
+    padding: var(--padding-md) 0;
+}
+
+h3 {
+    font-size: 2.5rem;
+    padding: var(--padding-sm) 0;
+}
+
+h4 {
+    font-size: 1.2em;
+    font-weight: 800;
+    padding: var(--padding-md) 0;
+}
+
 section {
     align-items: start;
     text-align: left;
@@ -41,6 +67,7 @@ section {
     flex-direction: column;
     justify-content: center;
 }
+
 a {
     text-decoration: none;
     color: var(--color-on-surface);
@@ -54,12 +81,13 @@ video {
     margin: 1em 0;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
-img{
+
+img {
     width: 100%;
     height: auto;
 }
 
-.iconify{
+.iconify {
     width: 1.2em;
     height: 1.2em;
     vertical-align: middle;

app/components/ProjectSection.vue

@@ -131,21 +131,6 @@ const allProjects: ProjectCategory[] = [
 </template>
 
 <style scoped lang="scss">
-h2 {
-    font-size: 6rem;
-    padding: var(--padding-md) 0;
-}
-
-h3 {
-    font-size: 3rem;
-    padding: var(--padding-sm) 0;
-}
-
-h4 {
-    font-size: 1.2em;
-    font-weight: 800;
-    padding: var(--padding-md) 0;
-}
 
 .project-category {
     width: 100%;