body {
font-family: "Segoe UI", Arial, sans-serif;
background: #f0f4f8;
margin: 0;
padding: 0;
color: #333;
}
header, footer {
text-align: center;
padding: 1rem;
background: #0077b6;
color: white;
}
h1, h2 {
margin-top: 0;
}
/* Layout container */
.content-container {
display: flex;
justify-content: center;
gap: 20px;
padding: 20px;
flex-wrap: wrap; /* Makes it responsive on mobile */
}
/* Section cards */
.card {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
flex: 1;
min-width: 250px; /* Keeps a minimum size so they stack nicely on small screens */
max-width: 350px;
}
/* Table styling */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
border-bottom: 1px solid #ddd;
text-align: left;
}
/* Links styling */
a {
color: #0077b6;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Responsive footer */
footer {
font-size: 0.9rem;
}