Merge pull request #97 from dhruv389/fix/font-style

fixed and improved  font style align with design   #80

frontend/src/App.css

@@ -1,8 +1,89 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Anonymous+Pro");
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: "Roboto", sans-serif;
+  /* font-family: "Roboto", sans-serif; */
+  font-family: "Poppins", sans-serif;
+}
+
+:root {
+  --color-primary: #6f6af8;
+
+  --color-white: #fff;
+
+  --color-red: rgb(255, 63, 63);
+
+  --color-gray-100: hsl(220, 20%, 10%, 5%);
+  --color-gray-200: hsl(220, 20%, 10%, 10%);
+
+  --color-gray-300: hsl(220, 20%, 10%, 25%);
+  --color-gray-500: hsl(220, 20%, 10%, 50%);
+
+  --color-gray-700: #252542;
+  --color-gray-900: #0c0c22;
+
+  /* --color-bg: rgba(230, 230, 235, 0.648); */
+  /* --color-bg: rgb(255 255 255 / 89%); */
+
+
+  --color-bg: rgb(249 249 249 / 93%);
+
+  --transition: all 300ms ease;
+
+  --container-width-1g: 84%;
+
+  --container-width-md: 92%;
+
+  --form-width: 50%;
+
+  --radius-1: 0.3rem;
+
+  --radius-2: 0.6rem;
+
+  --radius-3: 1rem;
+}
+
+
+
+html {
+  scroll-behavior: smooth;
+}
+
+
+
+a {
+  color: var(--color-gray-700);
+  text-decoration: none;
+}
+ul {
+  list-style: none;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--color-gray-900);
+  line-height: 1.1;
+}
+h1 {
+  font-size: 2.2rem;
+}
+h2 {
+  font-size: 1.9rem;
+}
+h3 {
+  font-size: 1.3rem;
+  line-height: 1.25;
+}
+h4 {
+  font-size: 1.1rem;
+}
+h5 {
+  line-height: 1.4;
 }
 
 
@@ -50,6 +131,10 @@ body {
   align-items: center;
   min-height: 100vh;
   background-color: #d9dbe6;
+
+  font-family: "Poppins", sans-serif;
+  font-size: 1.6;
+  color: var(--color-gray-700);
 }
 
 .player {