/*
Coder: 
Date: 
Venue: Web Computing - 1
Lesson: Wrapping up a Simplistic Nav Bar - Finish
File: media-queries.html
*/

/*--------- MEDIA QUERIES ----------*/
/*showing the BS5 breakpoints: https://getbootstrap.com/docs/5.0/layout/breakpoints/*/
@media (max-width: 576px) {/*x-small*/
    nav {
        border-bottom: 4px gray solid;
    }
}

@media (min-width: 577px) {/*small*/
    /*400px or less*/
    nav {
        border-bottom: 4px red solid;
    }
}

@media (min-width: 768px) {/*medium*/
    nav {
        border-bottom: 4px orange solid;
    }
}

@media (min-width: 992px) {/*large*/
    nav {
        border-bottom: 4px yellow solid;
    }
}

/*begin to show inline navigation and remove burger menu icon*/
@media (min-width: 1200px) {/*extra large*/
    nav {
        border-bottom: 4px green solid;
    }
}

@media (min-width: 1400px) {/*extra extra large*/
    nav {
        border-bottom: 4px blue solid;
    }
}