/* Mobile First View: */

/* Style the header which contains the navigation links */
header {
    background-color: black;
    overflow: hidden;
}

/* Hide the checkbox which we use for the hamburger menu functionality */
#ham_checkbox {
    display: none
}

/* Style the image we use as a label for the hamburger menu checkbox */
#ham_image {
    background-color: white;
    display: block;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    width: 10%;
}

/* Show or hide the navigation links depending on whether the hamburger menu checkbox is checked or not */
input[id="ham_checkbox"]:not(:checked) + nav {
    display: none;
}

/* Style the Tree heading */
h1 {
    color: white;
    float: left;
    padding: 0 20px;
    text-align: center;
    width: 100%;
}

/* Style the links inside the navigation bar */
nav a {
    color: white;
    float: left;
    font-size: 17px;
    padding: 30px 20px;
    text-align: center;
    text-decoration: none;
    width: 100%
}

/* Change the color of links on hover using mouse */
nav a:hover {
    background-color: white;
    color: black;
}

/* Change the color of links on focus using tab key */
nav a:focus {
    background-color: white;
    color: black;
    outline: none;
}

/* Change the color of the active/current link */
.active_nav {
    background-color: #00008B;
    color: white;
}

/* Meduim devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

    /* Hide the hamburger menu image we use as a label for the hamburger menu checkbox */
    #ham_image {
        display: none;
    }

    /* Show the navigation links... even if the hamburger menu checkbox is not selected (menu open) */
    input[id="ham_checkbox"]:not(:checked) + nav {
        display:block;
    }

    /* Style the Tree heading */
    h1 {
        text-align: left;
        width: 390px;
    }

    /* Style the navigation bar */
    nav {
        float: right;
    }

    /* Style the links inside the navigation bar */
    nav a {
        width: auto;
    }

}