/*
Coder: klp
Date: 2022-11-11
File: siteStyles.css
App: Stranger Things
Comments:
Background image
https://wallpapersden.com/the-mind-flayer-coming-hd-stranger-things-wallpaper/
Overall site styles
*/
/*--------- navbar styles ----------*/
img#mastheadIcon{
    width: 60px;
    height: auto;
    margin-right: 10px;
}

div#primaryContent{
    max-width: 900px;
    background-color: #9E3252;
    /*dwr! with margins set, canvas doesn't resize*/
    /* margin-left: auto;
    margin-right: auto; */
    /*put them in media queries, works now*/
    box-shadow: 0px 0px 10px 5px #f7d7eb;
}

div#instr{
    max-width: 500px;
}

.fancy-font1{
    font-family: 'Passion One', cursive;
}

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

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

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

.not-mobile {
    display: block;
}

/*--------- 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;
    }

    .not-mobile {
        display: none;
     }
}

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