/*
Coder: klp
Date: 2022/09/30
Site: TNT
File: jsgs-novice-styles.css

*/
/*zero out default styles*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /*a Google Font*/
    font-family: 'IBM Plex Sans Condensed', sans-serif
}

/*-------- main --------*/
main{
    background-image: url("../images/simpleBg.jpg");
    background-repeat: repeat;
}

/*--------- Header Styles ----------*/
header {
    height: 85px;
    padding: 15px 10px 15px 10px;
    background-color: beige;
}

header h1 {
    /*a Google Font*/
    font-family: 'Boogaloo', cursive;
    margin-bottom: 0px;
}

header div#mastheadText {
    float: left;
    margin-top: -20px;
}

header img#mastheadIcon {
    float: left;
    padding-right: 2px;
    width: 60px;
    height: auto;
    margin-right: 10px;
    background-color: gold;
    border-radius: 50%;
    margin-bottom: 5px;
}

/*--------- Navbar Styles ----------*/
nav {
    display: block;
    clear: left;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 35px;
    background-color: gold;

    /*fit edge of nav bar up against header border*/
    margin-left: -10px;
    padding-left: 10px;
    margin-right: -10px;
    padding-right: 10px;
}

nav ul li {
    display: inline-block;
    text-decoration: none;
    margin-right: 15px;
}

nav ul li a {
    color: black;
    text-decoration: none;
}


/*-------- primary content --------*/
div#btnDiv{
    max-width: 800px;
}

div#tableDiv{
    overflow-x: auto;
}

div#artwork{
    clear: both;
    text-align: center;
    max-width: 600px;
}

canvas{
    border: 5px solid lightgray;
    width: 90%;
    background-color: gainsboro;
    cursor: pointer;
}

/*-------- notes area --------*/
div#notes{
    max-width: 800px;
}

div#notes table p{
    font-size: 1em;
}

div#notes table{
    font-size: .6em;
    background-color: #faf3e0;
}


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

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

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

/*-------- links --------*/
div#primaryContent a{
    color:#d65c20;
    font-weight: bold;
    text-decoration: none;
}

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


/*-------- fonts --------*/
.cursive-font-1{
    font-family: 'Boogaloo', cursive !important;
}

/*-------- miscellaneous classes --------*/

/*used to hide info that we ultimately want but are not yet meaningful*/
.not-for-mobile{
    display: none;
}

/*default smaller size; scale up with media queries*/
div#mastheadText h1{
    font-size: 1.3em;
}

/*--------- MEDIA QUERIES ----------*/
/*showing the BS5 breakpoints: https://getbootstrap.com/docs/5.0/layout/breakpoints/*/
@media (max-width: 576px) {/*x-small*/
    p{
        font-size: .8em;
    }
    nav, header {
        border-bottom: 4px gray solid;
    }
}/* end mq max 576 */

@media(min-width: 375px){
    div#mastheadText h1{
        font-size: 1.5em;
    }
}/* end mq min 375 */

@media (min-width: 400px) {/*small*/
    div#notes table{
        font-size: .8em;   
    }
}/* end mq min 400 */

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

    div#mastheadText h1{
        font-size: 2em;
    }

    header{
        height: 113px;
    }
    
    /*at this stage show previously hidden elements*/
    .not-for-mobile{
        display: block;
    }
}/* end mq min 577 */

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

@media (min-width: 992px) {/*large*/
    nav {
        border-bottom: 4px yellow solid;
    }
}/* end mq min 992 */

@media (min-width: 1200px) {/*extra large*/
    nav {
        border-bottom: 4px green solid;
    }
}/* end mq min 1200 */

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