/* This file contains styles for larger screens (tablets and desktops) */

@media (min-width: 768px) {
    /* Header and Navigation for larger screens */
    #menu-button {
        display: none; /* Hide hamburger menu */
    }

    nav {
        display: flex; /* Show nav items horizontally */
        flex-direction: row;
        width: auto;
        margin-top: 0;
        gap: 1.5rem;
    }

    nav a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--primary-color);
        transition: width 0.3s ease;
    }

    nav a:hover::after,
    nav a.active::after {
        width: 100%;
    }
    
    /* Main Content Layout for larger screens */
    main {
        padding: 2rem;
    }
    
    .about-me-content {
        flex-direction: row; /* Side-by-side layout */
        text-align: left;
    }

    #course-cards-container {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Multi-column grid */
    }
}