/*
Coder: klp
Date: 2022-07-04
File: tntxbx_site_styles_2022.css

Overall site styles
*/

html{
    font-family: 'IBM Plex Sans Condensed', sans-serif !important;
}

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

.navbar-toggler-icon{
    /*dwr! must go from the styles area to the images area! */
    background-image: url("../images/np_burger_2764339_4E3D2E.svg") !important;
}

.navbar-toggler:focus {
    box-shadow: 0 0 1px 1px;
}

nav p{
    background-color: pink;
    float: left;
    clear: both;
    display: block;
}

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

.appTypeIcon{
    float: left;
    width: 100px;
    margin-right: 10px;
    padding: 10px;
}

/*--------- footer styles ----------*/
footer{
    font-size: .8em;
}
footer li a img{
    width: 50px;
    height: auto;
}

/*--------- links ----------*/

a{
    font-weight: bold;
    text-decoration: none;
}

.link-button:hover{
    text-decoration: underline;
}


/*--------- fonts ----------*/
h1{
    font-family: 'Boogaloo', cursive;
}

/*--------- colors ----------*/
.light-tan{
    background-color: #f4dfcb;
}

.sand{
    background-color: #DFAC75;
}

.dark-brown{
    color: #4E3D2E;
}

.dim{
    background-color: #d7dadd;
}

/*2022-07-04*/
/*use for light-colored images needing contrast bg*/
.lightImg{
    background-color: #555;
    border-radius: 50%;
  }

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

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