/* Custom styles */
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        header {
            text-align: center;
            padding: 20px;
            background-color: #343a40;
            /* Dark header */
            color: white;
        }

        header img {
            height: 100px;
            /* Increase the height for a larger logo */
            max-width: 100%;
            /* Ensure the logo scales proportionally */
            object-fit: contain;
            /* Ensures the image does not stretch */
        }

        h1 {
            margin: 0;
        }

        main {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        /* Container for all links */
        .links-container {
            display: grid;
            grid-template-columns: 1fr; /* Single column layout */
            gap: 15px;
            width: 400px;   /* Adjust width as needed */
        }

        /* Style for all links */
        .links-container a {
            text-decoration: none;
            color: white;
            font-size: 2em;
            text-align: center;
            background-color: #007bff;  /* Primary color */
            padding: 10px 20px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            display: block; /* Make links block-level for full width */
        }

        .links-container a:hover {
            background-color: #0056b3;  /* Darker blue on hover */
        }

        /* Specific style for the first link */
        #first-link {
            padding-top: 30px;  /* Make it taller */
            padding-bottom: 30px;   /* Make it taller */
            /* Width is already 100% due to grid layout and block display */
        }

        /* Container for the links - updated for 2x2 layout */
.sub-links-container {
    display: grid;
    /* Change from 3 columns to 2 columns */
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 10px;
    justify-items: center;
    align-items: stretch; /* Vertical align */
    background-color: #495057; /* Slightly different background for visualization */
    padding: 10px;
    border-radius: 5px;
}

/* Ensure sub-links fit well (No changes needed here for the grid structure change) */
.sub-links-container a {
    width: 100%;    /* Make sub-links fill their grid cell */
    padding: 10px 5px; /* Adjust padding if needed */
    font-size: 1em; /* Slightly smaller font for sub-links if needed */
    aspect-ratio: 2 / 1;    /* Attempt to make it square */
    display: flex;
    justify-content: center; /* Center text horizontally */
    align-items: center; /* Center text vertically */
    text-align: center; /* Ensure text is centered if it wraps */
    min-height: 40px; /* Optional: Set a minimum height if needed */
}

        footer {
            text-align: center;
            padding: 15px;
            background-color: #343a40;
            color: white;
        }

        footer p {
            margin: 0;
        }