/* Sets the box-sizing of ALL elements to a border-box (includes padding and border width in the total width). */
* {
    box-sizing: border-box;
}

/* Removes the default margins on the body (allows you to use the full width and height of the page). */
body {
    margin: 0;
}



/* Styles the navigation bar. */
ul.navBar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #f1f1f1;
    text-align: center;
    width: 100%; /* Spans the navigation bar across the full width of the screen. */
    position: absolute; /* Positions the navigation bar relative to the most recently positioned parent (none, body by default). */
    top: 125px; /* Moves the navigation bar underneath the header.
                   NOTE: Must be the same as the height of the header (line 57). */
}

/* Resizes the navigation bar to accommodate overflow (clearfix hack).
   IMPORTANT when floating elements! */
ul.navBar:after {
    content: "";
    clear: both;
    display: table;
}

ul.navBar li a {
    display: block;
    color: #000000;
    padding: 8px 16px;
    text-decoration: none;
    width: 100%;
    float: left;
}

ul.navBar li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.navBar li a:hover {
    background-color: #555000;
    color: white;
}



/* Styles the header. */
div.header {
    height: 125px;
    background-color: grey;
    padding: 15px;
    text-align: center;
    color: white;
}



/* Styles the content. */
div.content {
    padding: 1px 16px;
    height: 1000px; /* UNECESSARY: Increases the height of the content block to allow scrolling. */
}

/* UNECESSARY: Positions the word "content" in the content block. */
div.content p {
    text-align: center;
    position: relative;
    top: 50%;
}



/* Styles the footer. */
div.footer {
    background-color: grey;
    padding: 15px;
    text-align: center;
    color: white;
}



@media only screen and (min-width: 320px) {
    /* Sets the width of the navigation bar links. */
    ul.navBar li a {
        width: 50%;
    }
}

@media only screen and (min-width: 768px) {
    /* Sets the width of the navigation bar links. */
    ul.navBar li a {
        width: 16.66%;
    }
}

@media only screen and (min-width: 1024px) {
     /* Properly positions a fixed navigation bar on the left side of the screen. */
    ul.navBar {
        text-align: left;
        height: 100%; /* Full height of the page. */
        width: 25%; /* 25% of the page. */
        position: fixed; /* Fixed, does not move when the page is scrolled. */
        top: 0px; /* Moves the navigation bar to the top of the page. */
    }
    
    /* Sets the width of the navigation bar links. */
    ul.navBar li a {
        width: 100%;
    }
    
    
    
    /* Properly positions the container division block on the right side of the screen. */
    div.container {
        width: 75%; /* 75% of the page. */
        position: relative; /* Positions the container relative to its parent (body) */
        left: 25%; /* Pushes the container to the left by 25%.
                      NOTE: The same thing can be done using "margin-left: 25%" instead. */
    }
}