/*ryecatcher.ca website header and navigation menu bar stylesheet*/

body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: firebrick;
}


/* DESKTOP & TABLET LANDSCAPE HEADER SETTINGS ================================================================================================================================  */
header {
    width: auto; /*to take up full width of screen*/
    background-color: firebrick;
    height: 80px; /*height of header*/
    margin-top: 0px;
    padding-top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}


.header_link { /*header a*/
    text-decoration: none; /*even though will be used as link to homepage remove underline for display purposes in header*/
    color: gold; /*to ensure doesnt default to white*/
}


#ryecatcherca {
    font-family: "Times New Roman", serif; /*set desired ryecatcher style font type*/
    color: gold; /*set desired ryecatcher font color*/
    text-align: center;
    font-size: 350%; /*set font size equivalent to 16px x 300% = 48px*/
    font-style: normal;
    font-weight: normal;
}


/* DESKTOP & TABLET(LANDSCAPE) NAVIGATION MENU BAR SETTINGS ===================================================================================================================== */
.menu_selector {
    width: auto; /*to take up full width of screen*/
    height: 20px; /*height of navigation menu bar*/
    margin-top: 0;
    background-color: black;
    display: flex;
    justify-content: space-evenly; /*space-around;*/
    align-items: center;
    list-style-type: none;
    color: white;
    margin-bottom: 0px;
}

#menu_selector li { /*not entirely sure about this */
    display: inline;
    width: 100px;
}

ul li a {
    text-decoration: none;
    color: white;
    font-size: 16px;
}

    ul li a.contact { /*NOTE: this must be customized for every page!!!! ie.for contact page class="contact" was used therefore written as "a.contact" here  */
        color: gold; /* ... if class had been class="projects" would have been written as "a.projects";  this is used to hi-lite current page in nav bar*/
    }

.menu_selector li a:hover {
    color: black;
    background-color: white;
}



#nav_selector_small_top {
    display: none; /*NOTE: navigation bars for mobile and tablet(portrait must be hidden when this type of device not being used*/
}

#nav_selector_small_divider {
    height: 5px;
    width: 100%;
    display: none; /*NOTE: navigation bars for mobile and tablet(portrait must be hidden when this type of device not being used*/
}

#nav_selector_small_bottom {
    display: none; /*NOTE: navigation bars for mobile and tablet(portrait) must be hidden when this type of device not being used*/
}





/* TABLET(LANDSCAPE) NAVIGATION MENU BAR SETTINGS ===================================================================================================================== */
@media only screen and (max-width:1200px) and (min-width:901px) { /*originally 480px*/


    header {
        height: 80px;
    }

    #ryecatcherca {
        font-size: 350%;
    }

    #nav_selector {
        display: block;
    }

    ul li a.home {
        display: block;
    }

    #nav_selector_small_top {
        display: none; /*NOTE: navigation bars for mobile and tablet(portrait) must be hidden when this type of device not being used*/
    }

    #nav_selector_small_divider {
        display: none;
    }

    #nav_selector_small_bottom {
        display: none;
    }
}



/* TABLET(PORTRAIT) & SMARTPHONE(LANDSCAPE) NAVIGATION MENU BAR SETTINGS ===================================================================================================================== */
@media only screen and (max-width:900px) and (min-width:601px) { /*originally 480px*/


    header {
        height: 50px; /*reduce size of header from 80px to 50px for smaller screen size*/
    }

    #ryecatcherca {
        font-size: 35px; /*reduce size of header font from 56px to 35px for smaller screen size*/
    }

    #nav_selector {
        display: none; /*hide wider desktop navigation menu bar*/
    }



    #nav_selector_small_top {
        display: block; /*display narrower navigation bar for smaller screen device*/
    }

    #nav_selector_small_divider {
        display: none; /*divider between mini bars kept hidden unless displayed using javascript*/
    }

    #nav_selector_small_bottom {
        display: none; /*lower navigation bar kept hidden unless displayed using javascript*/
    }
}



/* SMARTPHONE(PORTRAIT) NAVIGATION MENU BAR SETTINGS ===================================================================================================================== */
@media only screen and (max-width:600px) { /*originally 480px*/

    #nav_selector {
        display: none; /*hide wider desktop navigation menu bar*/
    }

    #nav_selector_small_top {
        display: block; /*display narrower navigation bar for smaller screen device*/
    }

    #nav_selector_small_divider {
        display: none; /*divider between mini bars kept hidden unless displayed using javascript*/
    }

    #nav_selector_small_bottom {
        display: none; /*lower navigation bar kept hidden unless displayed using javascript*/
    }

    header {
        height: 50px; /*reduce size of header from 80px to 50px for smaller screen size*/
    }

    #ryecatcherca {
        font-size: 35px; /*reduce size of header font from 56px to 35px for smaller screen size*/
    }

    ul li a {
        font-size: 80%;
    }
}