add styling

frontend/src/App.css

@@ -1,17 +1,52 @@
+/* fonts.css */
+@font-face {
+    font-family: 'Plovdiv'; /* Font family name */
+    src: url('./assets/fonts/Plovdiv/PlovdivDisplay-Bold.otf') format('opentype'); /* Regular style */
+    font-weight: bold;  /* Standard weight */
+    font-style: normal;    /* Standard style */
+}
+
+@font-face {
+    font-family: 'Plovdiv'; /* Same font family name */
+    src: url('./assets/fonts/Plovdiv/PlovdivDisplay-Regular.otf') format('opentype'); /* Bold style */
+    font-weight: normal;   /* Bold weight */
+    font-style: normal;  /* Standard style */
+}
+
+@font-face {
+    font-family: 'Pomelo'; /* Name of the font */
+    src: url('./assets/fonts/Pomelo/PomeloRegular.ttf') format('truetype'); /* Path to the TTF file */
+    font-weight: normal;  /* Standard weight */
+    font-style: normal;   /* Standard style */
+}
+
 #root {
     width: 100%;
-    max-width: 1280px;
     text-align: center; /* Centered text alignment */
 }
 
 /* Overall Body Style */
 body {
     background-color: #ffffff; /* Light background for contrast */
-    color: #4b2e2e; /* Darker red brown for readability */
-    font-family: 'Arial', sans-serif;
+    background-image: url('./assets/snowflakes.png'); /* Background image */
+    background-size: cover;      /* Cover the entire screen */
+    background-position: center;  /* Center the image */
+    background-repeat: no-repeat; /* Prevent repeating */
+    color: #ffffff; /* Darker red brown for readability */
+    font-family: 'Plovdiv', sans-serif;
+    font-size: 1.5em;
     margin: 0;
     text-align: center; /* Centered text alignment */
     padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@media (max-width: 768px) {
+    body {
+        font-size: 1em;
+    }
 }
 
 /* Header Style */
@@ -26,6 +61,10 @@ header h1 {
     font-size: 2.5em;
 }
 
+h1 {
+    font-family: 'Pomelo', sans-serif;
+}
+
 /* Section Style */
 section {
     background-color: #e4f7e0; /* Light green background */
@@ -39,7 +78,6 @@ button {
     background-color: #b77de5; /* Purple with a slight festive flair */
     color: white;
     border: none;
-    padding: 10px 20px;
     border-radius: 5px;
     cursor: pointer;
     font-size: 1.1em;
@@ -65,39 +103,37 @@ footer {
     position: relative;
 }
 
-/* Snowflakes Background */
-.snowflakes {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url('./assets/snowflakes.png'); /* Snowflakes pattern */
+.table-wrapper {
+    width: 100%; /* Full width of the viewport */
+    text-align: center; /* Center the text (optional for non-text elements) */
+    overflow-x: auto; /* Enables horizontal scrolling if necessary */
 }
 
 /* General table styles */
 table {
-    width: 100%;
+    width: 100%;  /* Set table width to 80% to create space on sides */
+    max-width: 100%;  /* Prevents exceeding the parent's width */
+    color: black;
     border-collapse: collapse;
-    margin: 20px 0;
     font-size: 1em;
-    font-family: 'Arial', sans-serif;
-    text-align: center; /* Centered table text */
+    text-align: center; /* Centered text in table */
+    margin: 0 auto; /* Center the table within the wrapper */
 }
 
+
 /* Table header styles */
 th {
     background-color: #060698; /* Christmas red */
     color: white;
     padding: 10px 15px;
-    border-bottom: 3px solid #b7c9b5; /* Light green border for header */
+    border-bottom: 3px solid #e0e9f7; /* Light green border for header */
 }
 
 /* Table cell styles */
 td {
     border: 1px solid #ddd;
     padding: 10px 15px; /* Added padding for better spacing */
-    background-color: #e4f7e0; /* Light green background for cells */
+    background-color: #e0e9f7; /* Light green background for cells */
 }
 
 /* Zebra striping for table rows */