change separator style

src/app.css

@@ -4,6 +4,12 @@
   
 } */
 
+.divider {
+  border-bottom-width: 1px;
+  padding-bottom: 3px;
+  border-color: #38444d;
+}
+
 .content {
   max-width: 1440px;
   margin: 0 auto;
@@ -11,13 +17,20 @@
   text-align: center;
 }
 
+.main-content {
+  padding: 20px 25px;
+  text-align: left;
+}
+
 .logo {
   height: 6em;
   padding: 1.5em;
 }
+
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
+
 .logo.preact:hover {
   filter: drop-shadow(0 0 2em #673ab8aa);
 }
@@ -30,8 +43,28 @@
   color: #888;
 }
 
+.users-score {
+  color: #a8adb3;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+@media screen and(max-width: 425px) {
+  .users-score {
+    font-size: .75rem;
+    line-height: 1rem;
+  }
+
+  .users-score-bar p {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
+
+
+
 @layer components {
   .text-prime {
     @apply text-secondary
   }
-}
+}

src/components/Separator/Default/index.tsx

@@ -0,0 +1,7 @@
+function DefaultSeparator() {
+  return (
+    <div class={"flex flex-row justify-between divider mb-2"} />
+  )
+}
+
+export default DefaultSeparator;

src/components/Separator/WithAnchor/style.css

@@ -1,8 +1,4 @@
-.divider {
+
-  border-bottom-width: 1px; 
-  padding-bottom: 3px;
-  border-color: #38444d;
-}
 
 a:hover {
   color: #92a8b7;