Refactor CSS variables and styles for consistency

Author: juanskieee

style.css

@@ -23,6 +23,7 @@ html, body { height: 100% }
 
 body {
   margin: 0;
+  display: flex;
   font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   background: linear-gradient(180deg, #f7f9fc, #f9fbff);
   color: var(--text-strong);
@@ -352,3 +353,138 @@ tr.accept-state { background: #eafaf2 }
   color: var(--text-muted);
   margin: 0;
 }
+
+/* Footer */
+.footer {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 20px 24px;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.footer-left {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.copyright {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--primary);
+  font-weight: 500;
+}
+
+.creator {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.footer-right {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+}
+
+/* Profile picture */
+.profile-pic {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.profile-pic img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Social links */
+.social-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--muted);
+  border: 1px solid var(--border);
+  transition: all 0.2s ease;
+  text-decoration: none;
+  /* Prevent default text colors from interfering */
+  color: inherit; 
+}
+
+/* SVG Icon Styling */
+.social-icon {
+  width: 22px;
+  height: 22px;
+  /* This allows the color to transition smoothly */
+  transition: fill 0.2s ease;
+}
+
+/* --- Brand Colors --- */
+
+/* GitHub */
+.social-link.github .social-icon {
+  fill: #181717; /* Official GitHub Black */
+}
+.social-link.github:hover {
+  background: #181717;
+  border-color: #181717;
+}
+.social-link.github:hover .social-icon {
+  fill: #ffffff; /* White icon on black bg */
+}
+
+/* Facebook */
+.social-link.facebook .social-icon {
+  fill: #1877F2; /* Official FB Blue */
+}
+.social-link.facebook:hover {
+  background: #1877F2;
+  border-color: #1877F2;
+}
+.social-link.facebook:hover .social-icon {
+  fill: #ffffff;
+}
+
+/* Instagram */
+.social-link.instagram .social-icon {
+  fill: #E1306C; /* Official Insta Pink */
+}
+.social-link.instagram:hover {
+  /* Instagram Gradient Background */
+  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
+  border-color: transparent;
+}
+.social-link.instagram:hover .social-icon {
+  fill: #ffffff;
+}
+@media (max-width: 640px) {
+  .footer-content {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .footer-left {
+    align-items: center;
+  }
+  
+  .footer-right {
+    justify-content: center;
+  }
+}