Initial Commit

main.css

@@ -0,0 +1,105 @@
+/* Dynamically Changing the content padding depending on the width of the screen */
+@media screen and (min-width: 1921px) and (max-width: 2560px) {
+	body {
+        padding-left: 20%;
+        padding-right: 20%;
+	}
+}
+
+@media screen and (max-width: 1920px) {
+	body {
+        padding-left: 10%;
+        padding-right: 10%;
+	}
+}
+
+/* General Styling */
+body{
+    font-family: Arial, Helvetica, sans-serif;
+}
+h2 {
+    text-align: center;
+    font-size: xx-large;
+}
+h3 {
+    text-align: center;
+    font-size: x-large;
+}
+hr {
+    border: 0;
+    height: 2px;
+    background: #5b5b5b;
+    margin: 20px 0;
+    width: 100%;
+}
+/* Navbar Styling */
+nav ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    background-color: #333333;
+    display: flex;
+    justify-content: center;
+}
+
+/* Give navbar the same rounded corners as the item components and clip children */
+nav ul {
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+ul li a {
+    display: block;
+    color: white;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+ul li a:hover {
+    background-color: #111111;
+}
+
+/* Pie chart styling */
+.chart-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: sans-serif;
+    gap: 20px;
+}
+
+#pie-segment {
+    transform: rotate(-90deg);
+    transform-origin: center;
+    transition: stroke-dasharray 0.5s ease-in-out;
+}
+
+.label h2 {
+    margin: 0;
+    color: #3498db;
+}
+
+circle {
+    transition: stroke-dasharray 0.6s ease, stroke-dashoffset 0.6s ease;
+    transform: rotate(-90deg);
+    transform-origin: center;
+}
+
+#legend {
+    font-family: sans-serif;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}