/*
Coder: klp
Date: 2024-08-20
File: siteStyles.css
App: SimpleP5JS-BS5Template2024-08-20


Overall site styles
*/
/*--------- navbar styles ----------*/
img#mastheadIcon{
    width: 60px;
    height: auto;
    margin-right: 10px;
}

div#primaryContent{
    min-width: 250px;
    max-width: 900px;
}

/*--------- footer styles ----------*/
footer{
    font-size: .8em;
}

footer div#footerContent{
    max-width: 500px;
    padding-bottom: 10px;
}

footer li a img{
    width: 50px;
    height: auto;
}

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

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

@media (min-width: 768px) {
    nav {
        border-bottom: 4px orange solid;
    }
    /*eureka!*/
    /*worked well here, canvas did not resize when in reg rule*/
    div#primaryContent{
        margin-left: auto;
        margin-right: auto;
    }
}

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

    div#jumbotron{
        background-position: center;
    }

    div#jumbotron2{
        background-position: 0px -150px;
    }
}

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

@media (min-width: 1400px) {
    nav {
        border-bottom: 4px blue solid;
    }
    div#jumbotron2{
        background-position: 0px -200px;
    }
}