/* Body and Text Styling */
body {
    background-color: #ffffff; /* Corresponds to bgcolor="#ffffff" */
    color: #000000;            /* Corresponds to text="#000000" */
    font-family: Arial, Helvetica, sans-serif; /* Corresponds to font face="arial,helvetica" */
    margin: 0; /* Remove default body margin */
    padding: 10px; /* Add some padding around the content */
}

/* Link Styling (Corresponds to alink, link, vlink attributes) */
a:link { color: #000000; }     /* Corresponds to link="#000000" */
a:visited { color: #000000; }  /* Corresponds to vlink="#000000" */
a:active { color: #ff0080; }   /* Corresponds to alink="#ff0080" */
a {
    text-decoration: none; /* Optional: remove underline from links */
}

/* Navigation Bar Styling - Replaces the first table */
.main-nav {
    background-color: #aabbdd; /* Corresponds to bgcolor="#aabbdd" */
    border: 1px solid #dddddd; /* Corresponds to table border style */
    padding: 8px; /* Corresponds to td padding */
    text-align: left; /* Corresponds to align="left" */
    margin-bottom: 20px; /* Space below the nav bar */
}
.main-nav a {
    font-size: small; /* Corresponds to size="-1" */
    margin-right: 10px;
}

/* Main Link Columns Layout - Replaces the second table structure */
.link-columns {
    display: flex; /* Use Flexbox for a responsive column layout */
    width: 100%;
    border: 1px solid #dddddd; /* Border for the entire container */
    border-collapse: collapse; /* Mimics the old table collapse behavior */
}

.column {
    flex: 1; /* Makes columns equally wide */
    padding: 8px;
    border-right: 1px solid #dddddd; /* Separator between columns */
}
/* Remove the border from the last column */
.column:last-child {
    border-right: none;
}

/* Styling for H3 and link groups */
h3 {
    margin-top: 0.5em; /* Reduce default header top margin */
    margin-bottom: 0.5em;
}

.column a {
    /* Style for links that are not in a group (on their own line) */
    display: block; /* Makes each link take up its own line */
    margin-bottom: 4px;
}

.link-group {
    /* Styles links that were grouped in a <div> */
    margin-bottom: 8px; /* Adds space after each grouping */
}
.link-group a {
    display: inline; /* Keeps links next to each other in a group */
    margin-right: 10px;
}