/*
Coder: klp
Date: 3/25/25
Site: tnt
App: EnglishFNameSimCP2025-03-26

*/
main {
    background-color: #fbf9f0 !important;
}

/*-------- navbar --------*/
img#mastheadIcon, nav img{
    width: 60px;
    height: auto;
    margin-right: 20px;
}

div#jumbotron{
    background-image: url('../images/cpSpinner.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 200px;
    border-bottom: 1px solid darkgrey;
}

div#jt-text{
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Dancing Script', cursive, Arial, sans-serif;
    color: white
}

div#jt-text h1, div#jt-text h4{
    text-shadow: none;
}

div#introDiv, footer p{
    max-width: 800px;
}

p#loadingPara{
    letter-spacing: 2px;
}

div#primaryContent{
    min-height: 500px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

main{
    background-image: url("../images/moroccan-flower-bg-15pcnt.png");
}

.text-custom-color1{
    color: #9F9889 !important;
}

.bg-custom-color1{
    background-color: #9F9889;
}

.googleFont1{
    font-family: 'Dancing Script', cursive;
}

.googleFont2{
    font-family: 'Dosis', sans-serif;
}

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

/*-------- colors --------*/


/*-------- footer --------*/
footer{
    padding-top: 10px;
    font-size: .8em;
    border-top: #9F9889 solid 1px;
}

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: 300px) {
    
    img#mastheadIcon {
        display: none; /* Hide the image */
    }
}

@media (max-width: 360px) {
    a#indexLink {
        font-size: 0.9em; /* Reduce font size */
    }
    
    img#mastheadIcon {
        width: 50px; /* Reduce width */
        height: auto; /* Maintain aspect ratio */
        transition: all 0.3s ease; /* Smooth transition */
    }
}

@media (max-width: 576px) {/*x-small*/
    p, figcaption{
        font-size: .8em;
    }
    nav {
        border-bottom: 4px gray solid;
    }

    div#jumbotron {
        background-color: rgba(0, 0, 0, 0.5); /* Fade background by 50% */
        height: 150px;
        min-height: 150px;
        transition: all 0.3s ease; /* Smooth transition */
        /* background-image: none; */
    }
}

@media (max-width: 577px) {/*small*/
    footer li img{
        width: 25px !important; /* Reduce width for footer images */
        height: auto; /* Maintain aspect ratio */
        transition: all 0.3s ease; /* Smooth transition */
    }
}


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


}

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

@media (max-width: 992px) {
    div#jumbotron {
        background-position: 10%; /* Position the background image at the bottom */
    }
}

@media (min-width: 992px) {/*large*/
    nav {
        border-bottom: 4px yellow solid;
    }
    div#jumbotron{
        background-position: center;
    }
}

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

@media (min-width: 1400px) {/*extra extra large*/
    nav {
        border-bottom: 4px blue solid;
    }
}