body { font-family: 'Segoe UI', sans-serif; }
footer a { font-size: 24px; color: #333; text-decoration: none; }
footer a:hover { color: #007bff; }


html {
    font-size: 16px; /* Default - will be overridden by JS */
}

body {
    font-size: 1rem; /* Base all text on root font size */
}

/* Ensure these elements scale properly */
h1 { font-size: 2rem; }
p, a, li, button { font-size: 1rem; }
/* Smooth transitions for interactive elements */
.list-group-item, #fontToggle {
  transition: all 0.2s ease;
}

/* Hover effects */
.list-group-item:hover {
  background-color: #f8f9fa;
}

#fontToggle:hover {
  transform: translateY(-1px);
}