Update main.css

Signed-off-by: Raydo Matthee <[email protected]>

css/main.css

@@ -1,39 +1,102 @@
-/* Add this to your main.css */
+/* Main CSS for Skunkworks Academy */
+
+/* Import Carbon Design System styles */
+@import url("https://unpkg.com/carbon-components/css/carbon-components.min.css");
+
+/* General body styles */
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #f4f4f4;
+    color: #161616;
+    margin: 0;
+    padding: 0;
+}
+
+/* Header styles */
+.bx--header {
+    background-color: #0f62fe;
+    color: #ffffff;
+}
+
+/* Main content styles */
+.bx--content {
+    padding: 2rem;
+}
+
+/* Footer styles */
+.bx--footer {
+    background-color: #0f62fe;
+    color: #ffffff;
+    padding: 1rem 0;
+    text-align: center;
+}
+
+/* Button styles */
+.bx--btn {
+    margin: 0.5rem;
+}
+
+/* Form input styles */
 .input-field {
     border-radius: 0.375rem; /* 6px */
     border: 1px solid #d1d5db;
 }
 
 .input-field:focus {
-    border-color: #6875f5;
-    box-shadow: 0 0 0 1px #6875f5;
+    border-color: #0f62fe;
+    box-shadow: 0 0 0 1px #0f62fe;
 }
 
+/* Checkbox styles */
 .checkbox-custom {
-    border-color: #6875f5;
+    border-color: #0f62fe;
 }
 
 .checkbox-custom:checked {
-    background-color: #6875f5;
-    border-color: #6875f5;
+    background-color: #0f62fe;
+    border-color: #0f62fe;
+}
+
+/* Utility classes */
+.text-center {
+    text-align: center;
+}
+
+.mt-4 {
+    margin-top: 1rem;
+}
+
+.mb-4 {
+    margin-bottom: 1rem;
+}
+
+.p-4 {
+    padding: 1rem;
 }
 
-.button-primary {
-    background-color: #2563eb;
-    color: white;
+/* Additional styles for sidebar */
+#sidebar {
+    transform: translateX(-100%);
+    transition: transform 0.3s ease-in-out;
 }
 
-.button-primary:hover {
-    background-color: #1d4ed8;
+#sidebar.open {
+    transform: translateX(0);
 }
 
-.button-secondary {
-    background-color: #e5e7eb;
-    color: #374151;
+/* Dropdown menu style */
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    padding: 12px 16px;
+    z-index: 1;
 }
 
-.button-secondary:hover {
-    background-color: #d1d3d5;
+.dropdown:hover .dropdown-content {
+    display: block;
 }
 
-/* Ensure that this matches the overall design of your site. */
+/* Ensure that this matches the overall design of your site. */