Fixed styles on home

src/views/HomePage.vue

@@ -86,13 +86,35 @@ header {
   width: 100%;
   border-radius: 10px;
   font-family: 'Rubik', sans-serif;
+  
+  h1 {
+    color: white;
+    font-size: 3rem; 
+  }
+}
+
+.pfp {
+  height: 130px !important;
+  width: 130px !important;
+  border: solid;
+  border-width: 4px;
+  border-radius: 50%;
+  border-color: white;
+  overflow: hidden;
+  margin-left: 20px;
+  user-select: none;
+  
+  img {
+    width:100%;
+    height:100%;
+    object-fit: cover;
+    background-color: #afb5c8;
+  }
 }
 
 #name {
   margin-left: 20px;
-}
-
-#name div {
+  div {
     top: calc(100% + 5px);
     left: 50%;
     pointer-events: none;
@@ -106,21 +128,21 @@ header {
     color: white;
     font-family: 'Rubik', sans-serif;
     border-radius: 5px;
-}
+  }
   
-header h1 {
-  color: white;
-  font-size: 3rem; 
-}
+  img {
+    pointer-events: none;
+  }
   
-header ul {
+  ul {
     display: flex;
     flex-direction: row;
     width: fit-content;
     gap: 5px;
-}
+    user-select: none;
+  }
   
-header li {
+  li {
     position: relative;
     display: flex;
     align-items: center;
@@ -132,24 +154,7 @@ header li {
     box-sizing: border-box;
     border-radius: 5px;
     cursor: pointer;
-}
-
-.pfp {
-  height: 130px !important;
-  width: 130px !important;
-  border: solid;
-  border-width: 4px;
-  border-radius: 50%;
-  border-color: white;
-  overflow: hidden;
-  margin-left: 20px;
-}
-
-.pfp img {
-  width:100%;
-  height:100%;
-  object-fit: cover;
-  background-color: #afb5c8
+  }
 }
 
 .intro {
@@ -165,67 +170,18 @@ header li {
   padding: 20px;
   text-align: center;
   box-sizing: border-box;
-}
   
-.intro h1 {
+  h1 {
     font-size: 3.5rem;
     font-weight: 500;
-}
+  }
 
-.intro p {
+  p {
     margin-top: 15px;
     font-size: 1.8rem;
     font-weight: 400;
     max-width: 800px;
-}
-
-article {
- background-color: #151d2f;
- height: 350px;
- width: 700px;
- margin-top: 90px;
- border-radius: 10px;
- padding: 20px;
-}
-
-article h1 {
-  font-size: 1.5rem;
-  color: white;
-  font-family: 'Rubik', sans-serif;
-  width: 100%;
-  text-align: center;
-}
-
-article div {
-  color: white;
-  font-family: 'Rubik', sans-serif;
-  font-weight: 300;
-  margin-top: 10px;
-  display: flex;
-  flex-direction: column-reverse;
-  overflow: auto;
-  height: 240px;
-  background-color: #111826;
-  padding: 10px;
-  border-radius: 10px;
-}
-
-article span {
-  margin: 8px 0;
-}
-
-article input {
-  all: unset;
-  margin-top: 10px;
-  background-color: #111826;
-  height: 40px;
-  color: white;
-  padding: 5px;
-  border-radius: 10px;
-  width: 100%;
-  box-sizing: border-box;
-  font-family: 'Rubik', sans-serif;
-  font-weight: 300;
+  }
 }
 
 .morearrow {