Update public/stylesheet.css

public/stylesheet.css

@@ -1,18 +1,59 @@
+/* General layout settings */
 body {
-	background-color: powderblue;
+    font-family: 'Inter', sans-serif;
+    background-color: #FAFAFA; /* Corresponds to --background */
+    color: #000000; /* Default text color */
+    margin: 0;
+    padding: 0;
 }
 
-.main {
-	text-align: center;
+/* Paper/Container settings */
+.container {
+    background-color: #FFFFFF; /* Corresponds to --paper */
+    padding: 1rem;
+    border-radius: 8px; /* Optional: Add rounded corners */
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for cards */
 }
 
-.GFG {
-	color: #009900;
-	font-size: 50px;
-	font-weight: bold;
+/* Primary color styling */
+.primary {
+    color: #F80061; /* Corresponds to --primary */
+    background-color: #FFE7EB; /* Corresponds to --primary.light */
+    border: 2px solid #980039; /* Corresponds to --primary.dark */
+    padding: 0.5rem;
+    border-radius: 4px;
+    text-align: center;
+    font-weight: bold;
 }
 
-#geeks {
-font-style: bold;
-font-size: 20px;
+/* Buttons */
+button {
+    background-color: #F80061; /* Corresponds to --primary */
+    color: #FFFFFF; /* Ensure high contrast */
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #980039; /* Corresponds to --primary.dark */
+}
+
+/* Links */
+a {
+    color: #F80061; /* Corresponds to --primary */
+    text-decoration: none;
+}
+
+a:hover {
+    color: #980039; /* Corresponds to --primary.dark */
+}
+
+/* Optional: Sidebar or panels */
+.sidebar {
+    background-color: #FAFAFA; /* Matches light theme background */
+    color: #000000; /* Ensure readability */
+    padding: 1rem;
+    border-right: 1px solid #CCCCCC; /* Subtle border for separation */
 }