/* Mobile-first breakpoints */

/* For screens larger than 600px (Tablets and small desktops) */
@media (min-width: var(--breakpoint-sm)) {
    /* Larger screen - styling adjustments */
    main {
        padding: var(--spacing-large);
        max-width: 80%;
    }

    h1 {
        font-size: 2rem;
    }

    p {
        font-size: 1.1rem;
    }

    /* Update navigation layout for medium screens */
    nav ul {
        justify-content: flex-start;
        padding-left: var(--spacing-medium);
    }

    nav ul li a {
        padding: var(--spacing-medium) var(--spacing-large);
    }
}

/* For screens larger than 1024px (Large desktops) */
@media (min-width: var(--breakpoint-lg)) {
    /* Large screen - additional adjustments */
    main {
        padding: var(--spacing-large);
        max-width: 70%;
    }

    h1 {
        font-size: 2.5rem;
    }

    p {
        font-size: 1.2rem;
    }

    /* Update navigation layout for larger screens */
    nav ul {
        justify-content: space-between;
        padding-left: 0;
        padding-right: var(--spacing-medium);
    }

    nav ul li a {
        padding: var(--spacing-medium) var(--spacing-large);
    }
}