/*
Coder: klp
Date: 2022-05-23
File: siteStyles.css
App: AppShell-BS5-JS2022-05-23


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


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

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

    p#insultPara{
        position:relative;
        width: 200px;
        top: 30%;
        left: 15%;
        font-size: .7em;
        /* background-color: pink; */
        /* top: 70px;
        left: 300px;
        width: 150px; */

    }
    
}

@media(min-width: 251px){
    p#insultPara{
        position:relative;
        width: 200px;
        top: 29%;
        left: 15%;
        font-size: .75em;
        /* background-color: yellow; */
        /* top: 70px;
        left: 300px;
        width: 150px;*/

    } 
}

@media (min-width: 300px) {
    p#insultPara{
        position:relative;
        width: 200px;
        top: 22%;
        left: 30%;
        font-size: .75em;
        /* background-color: purple; */
        /* top: 70px;
        left: 300px;
        width: 150px; */

    }
    
}

@media (min-width: 355px) {
    p#insultPara{
        position:relative;
        width: 200px;
        top: 22%;
        left: 32%;
        font-size: .8em;
        /* background-color: orange; */
        /* top: 70px;
        left: 300px;
        width: 150px; */

    }
    
}

@media (min-width: 385px) {
    p#insultPara{
        position:relative;
        width: 200px;
        top: 20%;
        left: 32%;
        font-size: .8em;
        /* background-color: lime; */
        /* top: 70px;
        left: 300px;
        width: 150px; */

    }
    
}
@media (min-width: 400px) {
    p#insultPara{
        position:relative;
        width: 200px;
        top: 20%;
        left: 35%;
        font-size: .9em;
        /* background-color: blue; */
        /* top: 70px;
        left: 300px;
        width: 150px; */

    }
    
}

@media (min-width: 500px) {
    p#insultPara{
        position:relative;
        width: 200px;
        top: 10%;
        left: 40%;
        font-size: 1em;
        /* background-color: bisque; */
        /* top: 70px;
        left: 300px;
        width: 150px; */

    }
    
}

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

    p#insultPara{
        position:relative;
        width: 200px;
        top: 8%;
        left: 45%;
        font-size: 1.2em;
        /* background-color: cadetblue; */
        /* top: 70px;
        left: 300px;
        width: 150px; */

    }
}

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

@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;
    }
}