update profilepage

src/assets/sass/base.sass

@@ -1,7 +1,6 @@
 .bloodline-devider
     font-size: 42px
     text-align: center
-    margin: 16px 0
     @media (min-width: 992px)
         margin: 24px 0
 
@@ -33,28 +32,6 @@
     &.grey
         background-color: var(--grey)
 
-.card
-    display: block
-    overflow: hidden
-    overflow-wrap: break-word
-    position: relative
-    padding: 0
-    text-decoration: none
-    transition-duration: .28s
-    transition-property: box-shadow,opacity,background
-    transition-timing-function: cubic-bezier(.4,0,.2,1)
-    z-index: 0
-    border-color: rgba(var(--v-border-color),var(--v-border-opacity))
-    border-style: solid
-    border-width: 0
-    border-radius: 16px
-    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2),0 1px 1px 0rgba(0, 0, 0, .14),0 1px 3px 0 rgba(0, 0, 0, .12)
-    background-color: $darkgrey
-    @media (min-width: 992px)
-        border-radius: 4px
-    &.card--variant1
-        border-radius: 0
-
 .bloodline-token
     height: 50px
     width: 50px

src/assets/sass/buttons.sass

@@ -1,19 +1,18 @@
 
 .btn
+    padding: 16px 24px
+    gap: 8px
+    border-radius: 14px
+    &.btn--disabled
+        background-color: #151515
+        color: #808080
+        cursor: not-allowed
+    &.black
+        background-color: var(--midnight-black)
     &.btn-immortal
-
         background-color: $purple
         color: $button-color
         font-size: 24px
-        padding: 16px 24px
-        gap: 8px
-        border-radius: 14px
         &:hover,&:focus,&:active
             background-color: darken($purple, 10%),
             cursor: pointer
-        &.btn--disabled
-            background-color: #151515
-            color: #808080
-            cursor: not-allowed
-        &.black
-            background-color: var(--midnight-black)

src/assets/sass/main.sass

@@ -19,7 +19,7 @@ body
     font-family: 'Inter', sans-serif
 
 .main
-    padding-top: 120px
+    padding-top: 106px
     @media (min-width: 992px)
         padding-top: 208px
 html
@@ -39,8 +39,8 @@ body
 .container
     margin-right: auto
     margin-left: auto
-    padding-right: 15px
-    padding-left: 15px
+    padding-right: 16px
+    padding-left: 16px
     @media (min-width: 992px)
         max-width: 800px
 

src/assets/sass/variables.sass

@@ -16,6 +16,7 @@ $purple: #4B0082
 $midnight-black: #0F0F0F
 $darkgrey: #202020
 $grey2: #2D2D2D
+$dark-grey: #2D2D2D
 
 $button-color: $white
 $button-background-color: $black
@@ -32,14 +33,55 @@ $button-background-color: $black
     --white: #{#F9F9FA}
     --grey: #{#858585}
     --grey2: #{$grey2}
+    --dark-grey: #{$dark-grey}
     --purple: #{$purple}
     --blood-color: #{$red}
     --midnight-black: #{$midnight-black}
     --black: #{$midnight-black}
     --darkgrey: #{$darkgrey}
+
+//fonts
+.low-mid-text
+    font-family: Inter
+    font-size: 16px
+    font-style: normal
+    font-weight: 400
+    line-height: normal
+.mid-mid-text
+    font-family: Inter
+    font-size: 18px
+    font-style: normal
+    font-weight: 400
+    line-height: normal
+.mid-text
+    font-family: Inter
+    font-size: 24px
+    font-style: normal
+    font-weight: 400
+    line-height: normal
+.small-text
+    font-family: Inter
+    font-size: 14px
+    font-style: normal
+    font-weight: 400
+    line-height: normal
+.number-mobile
+    font-family: Inter
+    font-size: 24px
+    font-style: normal
+    font-weight: 400
+    line-height: normal
+    letter-spacing: 4.32px
+
 // :root
 //     --font-size-text: 16px
 //     --font-size-title: 32px
 //     @media (min-width: 992px)
 //         --font-size-text: 24px
 //         --font-size-title: 36px
+
+.text-center
+    text-align: center
+
+.transparent
+    background-color: transparent