Update style.css

style.css

@@ -0,0 +1,71 @@
+/* !important */
+
+@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');
+
+* {
+    /* font-family: 'Comfortaa', cursive, sans-serif !important; */
+    font-family: "M PLUS Rounded 1c", sans-serif !important;
+    box-sizing: border-box !important;
+    font-weight: 200 !important;
+}
+
+:root {
+  --primary-color: #d67ae0;
+  --primary-color-rgb: 214, 122, 224;
+  --text-on-primary: #000000;
+  --bg-color: #f7f8fc;
+  --surface-color: #ffffff;
+  --text-color: #1c1c1f;
+  --subtext-color: #65676b;
+  --gradient-1: #fdfbff;
+  --gradient-2: #f4f6f9;
+  --icon-filter: invert(80%);
+  --icon-filter-hover: invert(0%);
+  --header-bg: rgba(247, 248, 252, 0.7);
+  --footer-bg: #eff1f5;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.07);
+  
+  --radius-sm: 20px !important;
+  --radius-md: 10px !important;
+  --background-fill-primary: #f7f8fc !important;
+  --background-fill-secondary: #ffffff !important;
+  --block-background-fill: var(--bg-color) !important;
+}
+
+:root .dark {
+  --primary-color: #eab5ee;
+  --primary-color-rgb: 234, 181, 238;
+  --text-on-primary: #000;
+  --bg-color: #0d1117;
+  --surface-color: #161b22;
+  --text-color: #e6edf3;
+  --subtext-color: #848d97;
+  --gradient-1: #1a121c;
+  --gradient-2: #0d1117;
+  --icon-filter: invert(10%) sepia(8%) saturate(93%) hue-rotate(170deg) brightness(95%) contrast(84%);
+  --icon-filter-hover: invert(90%);
+  --header-bg: rgba(13, 17, 23, 0.7);
+  --footer-bg: #161b22;
+  
+  --background-fill-primary: #0d1117 !important;
+  --background-fill-secondary: #161b22 !important;
+}
+
+lg, primary {
+  color: var(--primary-color) !important;
+  font-size: 14px !important;
+  padding: 8px 18px !important;
+  border: 2px solid var(--primary-color) !important;
+  transition: all 0.3s ease-in-out !important;
+  font-weight: bold !important;
+  background-color: transparent !important;
+  white-space: nowrap !important;
+}
+
+lg:hover, primary:hover {
+  background-color: var(--primary-color) !important;
+  color: var(--text-on-primary) !important;
+  transform: scale(1.05) !important;
+}