/* General Page Styles */ body {     font-family: Arial, sans-serif;     margin: 20px;     line-height: 1.6;     background-color: #f8f9fa; /* Light gray background */     color: #333; /* Dark text for readability */ }  /* Header Styling */ h2 {     text-align: center;     color: #007bff; /* Blue heading */     font-size: 24px; }  /* Container for Links */ .container {     display: flex;     flex-wrap: wrap;     gap: 10px;     justify-content: center;     max-width: 900px;     margin: auto;     padding: 10px;     overflow-y: auto; /* Enables scrolling for long lists */     background: white;     border-radius: 8px;     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */ }  /* Link Styling */ .container a {     color: #007bff;     text-decoration: none;     font-size: 16px;     padding: 5px;     display: inline-block;     transition: color 0.3s ease-in-out; /* Smooth color transition */ }  /* Hover Effect */ .container a:hover {     text-decoration: underline;     color: #0056b3; }  /* Responsive Design for Small Screens */ @media (max-width: 600px) {     .container {         flex-direction: column; /* Stack links on small screens */         text-align: center;     } }