update css

public/css/styles.css

@@ -1,3 +1,4 @@
+/* Base Styles */
 body {
     font-family: 'Roboto', sans-serif;
     display: flex;
@@ -5,15 +6,22 @@ body {
     min-height: 100vh;
     color: #333;
     margin: 0;
+    background-color: #f8f9fa;
 }
 
 main {
     flex-grow: 1;
+    padding: 20px;
 }
 
 a {
     color: #000;
     text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+a:hover {
+    color: #2c5364;
 }
 
 dl, ol, ul {
@@ -21,33 +29,46 @@ dl, ol, ul {
     margin-bottom: 1rem;
 }
 
+/* Primary Background */
 .bg-primary {
     --bs-bg-opacity: 1;
-    background-color: rgb(0 0 0) !important;
+    background-color: rgb(0, 0, 0) !important;
 }
 
+/* Navbar Styles */
 .navbar {
     background-color: #121212;
+    padding: 10px 20px;
 }
 
 .navbar-brand {
     font-size: 1.75rem;
     font-weight: bold;
     color: #ffffff;
+    transition: color 0.2s ease;
+}
+
+.navbar-brand:hover {
+    color: #2c5364;
 }
 
 .navbar-nav .nav-link {
     font-size: 1.15rem;
     padding-right: 1rem;
     color: #ffffff;
+    transition: color 0.2s ease;
 }
 
+.navbar-nav .nav-link:hover {
+    color: #2c5364;
+}
+
+/* Header */
 header {
-    background: #000000;
+    background: #000;
     color: #fff;
-    padding: 2px 0;
+    padding: 10px 0;
     text-align: center;
-    height: auto;
 }
 
 h1 {
@@ -57,9 +78,10 @@ h1 {
 
 p.lead {
     font-size: 1.5rem;
+    margin-bottom: 1.5rem;
 }
 
-/* Read Article Button Styling */
+/* Button Styles */
 .btn-outline-primary {
     font-size: 1.25rem;
     padding: 10px 20px;
@@ -75,9 +97,11 @@ p.lead {
     color: #ffffff;
 }
 
-/* Pagination Styling */
+/* Pagination Styles */
 .pagination {
     margin-top: 20px;
+    display: flex;
+    justify-content: center;
 }
 
 .pagination .page-item .page-link {
@@ -100,6 +124,7 @@ p.lead {
     color: #ffffff;
 }
 
+/* Footer Styles */
 footer {
     background-color: #121212;
     color: #fff;
@@ -111,40 +136,21 @@ footer {
 .footer-logo {
     font-size: 1.5rem;
     font-weight: bold;
+    margin-bottom: 10px;
 }
 
 .footer-links a {
     color: #999;
     text-decoration: none;
     margin-right: 1rem;
+    transition: color 0.2s ease;
 }
 
 .footer-links a:hover {
     color: #fff;
 }
 
-/* Custom Styles for Navbar and Dropdown */
-.navbar {
-    background-color: #121212;
-}
-
-.navbar-brand {
-    font-size: 1.75rem;
-    font-weight: bold;
-    color: #ffffff;
-}
-
-.navbar-nav .nav-link {
-    font-size: 1.15rem;
-    color: #ffffff;
-    padding-right: 1rem;
-}
-
-.navbar-nav .nav-link:hover {
-    color: #2c5364;
-}
-
-/* Custom Dropdown Styling */
+/* Dropdown Styles */
 .custom-dropdown {
     background-color: #1e1e1e;
     border: none;
@@ -159,21 +165,24 @@ footer {
     transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-.custom-dropdown .dropdown-item:hover {
-    background-color: #000000;
-    color: #ffffff;
-}
-
+.custom-dropdown .dropdown-item:hover,
 .custom-dropdown .dropdown-item:active {
     background-color: #000000;
     color: #ffffff;
 }
 
-/* Mobile Toggler */
+/* Mobile Navbar Toggler */
 .navbar-toggler {
     border-color: #ffffff;
 }
 
 .navbar-toggler-icon {
-    color: #ffffff;
+    background-color: #ffffff;
+    width: 30px;
+    height: 3px;
 }
+
+.py-4 {
+    padding-top: 1.2rem !important;
+    padding-bottom: 1.5rem !important;
+}