/* PseudoCode
1. background color = pink

========NAVBAR MARKUP CREATION =============
2. look up Bootstrap docs --> CREATE NAVBAR BRAND with html
3. CREATE navbar toggler where:
* <button class="navbar-toggler"  => is the feature = which is nav button that toggles
* type="button"  => button type button
* data-toggle="collapse" => what the button will do. It will collapse when clicked
* data-target="#" = what will it collapse as its data targets.
* aria-controls="" aria-expanded="false" aria-label="Toggle navigation"> THIS IS ACCESSIBLITY FEATURES. Aria attributes
4. Add the collapsible in navbar collapse and GIVE an ID = so the navbar toggler knows what to target for collapsing.
5. Add the Navbar collapsible nav link items under a list item
6. make it look nicer on custom css page (see NAVBAR CSS CUSTOM STYLING

========NAVBAR STYLING =============
7. Make navbar brand more prominient
8. Make navlinks white and hover on red
9. Make navbar sticky to the top with bootstrap

======== FIRST SECTION TITLE CARD AND IMAGE=============
10. make a fluid container with a .row. that has 2 col-6.
11. import and make image responsive
12. optional: added fontweight, fontsize adjustments

======== 3 BODY SECTIONS =============
13. make a fluid container for the body section
14. since 1 image and 1 text = 1/2 and 1/2 => bootstrap col-6
15. center text horizontally in a col with text-center and vertically in row with justify
16. NEW: we want to order text first then image to follow it. ASSIGN ORDER TO COLUMNS AND ROWS
img is order-2 NORMALLLY BUT on mid screens => order-md-1
text is order-1 NORMALLLY BUT on mid screens => order-md-2
17. THen copy the sections additional times
18. option: add margin bottoms to space out the content

========Optional NAVBAR SCROLLING EFFECT =============
Bonus: requires javascript

*/

body {
    background-color: lightpink;
    font-family: "Nunito", sans-serif;
}

/* Navbar styling */

#mainNavbar {
    font-size: 1.5rem;
    font-weight: 100;
}

#mainNavbar .navbar-brand {
    color: red;
}

#mainNavbar .nav-link {
    color: white;
}

#mainNavbar .nav-link:hover {
    color: red;
}

/* Main Title card styling */

#headingGroup span {
    color: red;
}


#headingGroup h1 {
    font-weight: 100;
    font-size: 2.8rem;
}

@media (max-width:1200px) {
    #headingGroup h1 {
        font-weight: 100;
        font-size: 2rem;
    }

}

/* ABOUT SECTION */

.blurb h2 {
    color: red;
    font-weight: 100;
    font-size: 2.5rem;
}

.blurb p {
    color: white;
    font-weight: 100;
    font-size: 1.2rem;
    line-height: 2rem;
}

.content {
    margin-top: 100px;
}

/* NAVBAR SCROLLING EFFECT */

.navbar.scrolled {
    background-color: purple;
    transition: background 500ms;

}