/**
 * Media queries for responsive design.
 * These are separate from base.css to keep things organized.
 */

@media (prefers-color-scheme: dark) {
    :root {
        --body-bg: #222;
        --header-bg: #333;
        --text: #eee;
        --brand: #66aacc;
        --brand-muted: #66aacc80;
        --accent: #ff7a59; /* no change */
    }
}

@media (min-width: 800px) {
    header {
        flex-direction: row;
    }

    main-footer-row {
        flex-direction: row;
    }
}