fork and restyle, init scaffold for changes

1 files changed, 23 insertions, 18 deletions

diff --git a/src/components/Result/index.styled.ts b/src/components/Result/index.styled.ts
index 21d471c..3b2d33d 100644
--- a/src/components/Result/index.styled.ts
+++ b/src/components/Result/index.styled.ts
@@ -1,33 +1,38 @@
 import styled from "styled-components";
 
 export const ResultTitle = styled.h1`
-  text-align: center;
+  font-family: "Roboto Mono", monospace;
+  font-size: 1.3rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  color: var(--cl-green-6);
+  margin-bottom: 8px;
+
   @media (max-width: 768px) {
-    width: 100%;
+    font-size: 1rem;
   }
 `;
 
 export const Tries = styled.h4`
-  @media (max-width: 768px) {
-    text-align: center;
-    width: 100%;
-  }
-
-  margin-top: 0;
+  font-family: "Roboto Mono", monospace;
+  font-size: 0.85rem;
+  font-weight: 400;
+  color: var(--cl-gray-8);
+  margin: 0 0 16px 0;
 `;
 
 export const SongTitle = styled.h3`
-  @media (max-width: 768px) {
-    text-align: center;
-    width: 100%;
-  }
-
-  margin-top: 0;
+  font-family: "Roboto Mono", monospace;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--cl-white);
+  margin: 0 0 4px 0;
 `;
 
 export const TimeToNext = styled.h4`
-  @media (max-width: 768px) {
-    text-align: center;
-    width: 100%;
-  }
+  font-family: "Roboto Mono", monospace;
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--cl-gray-6);
+  margin-top: 16px;
 `;