/* Latest Topics Styles */
main {
    max-width: 1200px;
    margin: 0px auto;
    padding-top: 0px;
}

    main h2 {
        font-size: 1.8rem;
        color: #2c3e50;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #3498db;
        font-weight: 600;
    }

    main ul {
        list-style: none;
        display: grid;
        gap: 1rem;
    }

    main li {
        padding: 1rem;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

        main li:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

    main a {
        /* color: #2c3e50;
        text-decoration: none; */
        font-size: 1.1rem;
        font-weight: 500;
        display: block;
        transition: color 0.2s ease;
        word-wrap: break-word;
        word-break: break-word;
    }

        main a:hover {
            color: #3498db;
        }

/* Dark Mode Styles */
.dark-mode main h2 {
    color: #f8f9fa;
    border-bottom-color: #4dabf7;
}

.dark-mode main li {
    background: #2d2d2d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

    .dark-mode main li:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

.dark-mode main a {
    color: #e0e0e0;
}

    .dark-mode main a:hover {
        color: #64b5f6;
    }

@media (max-width: 1024px) {
    main {
        padding-inline: 15%;

    }
}

/* Responsive Design */
@media (max-width: 768px) {

    main {
        padding-inline: 10%;
    }

        main h2 {
            font-size: 1.6rem;
        }

        main a {
            font-size: 1rem;
        }
}

@media (max-width: 480px) {

    main {
        padding-inline: 10px;
    }
    main h2 {
        font-size: 1.4rem;
    }

    main ul {
        gap: 0.8rem;
    }

    main li {
        padding: 0.8rem;
    }
}