/* Mobile First View */

header {
    background-color: black;
    /* Set back ground colour black for the header */

    overflow: hidden;
    /* Anything outside the box hide */
    /* Stops content from sticking out of the header */
}

#hamburger_checkbox {
    /* Hide the checkbox in mobile view */
    display: none;
}

#hamburger_image {
    background-color: white;
    /* Hamburger background colour */

    display: block;
    /* This is the CSS Box Model */

    margin: 0 auto 20px auto;
    /* Center the image and add space underneath it */

    width: 10%;
    /* Make the hamburger icon 10% of the screen width */

    /*
    Content - The content of the box, where text and images appear
    Padding - Clears an area around the content. The padding is transparent
    Border - A border that goes around the padding and content
    Margin - Clears an area outside the border. The margin is transparent
    */
}

h1 {
    /* Heading 1 style and colour */

    color: white;
    /* Make the heading text white */

    float: left;
    /* Position the heading on the left side */

    padding: 0 20px;
    /* Add space on the left and right of the heading */

    text-align: center;
    /* Center the heading text */

    width: 100%;
    /* Make the heading use the full width of the row */
}

#hamburger_checkbox:not(:checked)+nav {
    /* Menu does not appeared until hamburger is clicked */

    display: none;
    /* Hide the navigation menu while the checkbox is not checked */
}

nav a {
    color: aliceblue;
    /* Set navigation link text colour */

    float: left;
    /* Line up navigation links */

    padding: 30px 20px;
    /* Add space inside each navigation button */

    text-align: center;
    /* Center the link text */

    text-decoration: none;
    /* Remove the underline from links */

    width: 100%;
    /* Make each link take up a full row on mobile */

    /* Styled my navagation menu to look better */
}

nav a:hover {
    /* Hover is changing the style when using the mouse */

    background-color: white;
    /* Change background when mouse is over the link */

    color: black;
    /* Change text colour for better contrast */
}

nav a:focus {
    /* Focus is changing the style when using tab key */

    background-color: white;
    /* Change background when selected with keyboard */

    color: black;
    /* Change text colour when selected */

    outline: none;
    /* Turn off the outline box around the menu while using the tab key */
}

.active_nav {
    /* Change the colour of the button/navigation once you have selected it */

    background-color: rgb(72, 159, 194);
    /* Highlight the current page button */

    color: black;
    /* Use black text on the highlighted button */

    outline: none;
}

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

    /* Hide hamburger menu on desktops */
    #hamburger_image {
        display: none;
        /* No need for a hamburger menu when there is enough screen space */
    }

    /* Always show the navigations on desktops */
    #hamburger_checkbox:not(:checked)+nav {
        display: block;
        /* Keep the menu visible on larger screens */
    }

    h1 {
        text-align: left;
        /* Move heading text to the left */

        width: 390px;
        /* Give the heading a fixed width */
    }

    nav {
        float: right;
        /* Move the navigation menu to the right side */
    }

    nav a {
        width: auto;
        /* Let links size themselves instead of filling the whole row */
    }

}