.navbar {
    /* top: 0;
    left: 0; */

}


.navbar {
        text-align: center; 
    overflow: hidden;
    /* This ensures that any content that overflows beyond the boundary of our nav bar is not displayed */
    background-color: black;
    /* This colors the navbar black */
    position: fixed;
    /* This keeps the navbar at the top of the screen as we scroll */
    top: 0;
    /* This ensures no space is displayed above the navbar */
    width: 100%;
    /* This makes the navbar span the entire width of the page */
    z-index: 1;
    /* This ensures other elements don't display over the navbar */
    /* -webkit-animation: moveNav 5s; */
    /* This applies the moveNav animation below for Safari 4.0 - 8.0 */
    /* animation: moveNav 5s; */
    /* This applies the moveNav animation for all other browsers */
}

@keyframes moveNav {
    from {
        left: -100vw;
    }

    /* The navbar is starting off screen to the left */
    to {
        left: 0vw;
    }

    /* This moves the navbar into place on the screen */
}

.navbar a:nth-last-child(odd) {
    /* float: left; */
    /* This specifies that the text floats on the left on the navbar */
    display: inline-block;
    /* This ensures that other text will be displayed on the same line or row, instead of a new line */
    color: white;
    /* This is the font color for text on our navbar */
    padding: 14px 16px;
    /* This adds padding around our text */
    text-decoration: none;
    /* This gets rid of the underlines under the text on our navbar */
    font-family: Avant Garde, Helvetica;
    /* This specifies the font family for text on our navbar */
    font-size: 20px;
    /* This specifies the font size for text on our navbar */
    text-align: center;
    /* This centers the text within its container */
    position: relative;
    /* This sets the text relative to its normal positioning, allowing us to use the animation below */
    -webkit-animation: moveNavText 5.75s;
    /* Animation for Safari 4.0 - 8.0 */
    animation: moveNavText 5.75s;
    /* Applies the moveNavText animation for 5.75s */
}

.navbar a:nth-last-child(odd) {
    /* float: left; */
    /* This specifies that the text floats on the left on the navbar */
    display: inline-block;
    /* This ensures that other text will be displayed on the same line or row, instead of a new line */
    color: white;
    /* This is the font color for text on our navbar */
    padding: 14px 16px;
    /* This adds padding around our text */
    text-decoration: none;
    /* This gets rid of the underlines under the text on our navbar */
    font-family: Avant Garde, Helvetica;
    /* This specifies the font family for text on our navbar */
    font-size: 20px;
    /* This specifies the font size for text on our navbar */
    text-align: center;
    /* This centers the text within its container */
    position: relative;
    /* This sets the text relative to its normal positioning, allowing us to use the animation below */
    -webkit-animation: moveNavTextLeft 5s;
    /* Animation for Safari 4.0 - 8.0 */
    animation: moveNavTextLeft 5s;
    /* Applies the moveNavText animation for 5.75s */
}

/* moveNavText animation effect for moving the navbar text from above the view to the navbar */
@keyframes moveNavTextLeft {
    from {
        right: 100%;
    }

    /* This sets the navbar text 100% above the viewport */
    to {
        right: 0%;
    }

    /* This lowers the navbar text onto the navbar */
}

.navbar a:nth-last-child(even) {
    /* float: left; */
    /* This specifies that the text floats on the left on the navbar */
    display: inline-block;
    /* This ensures that other text will be displayed on the same line or row, instead of a new line */
    color: white;
    /* This is the font color for text on our navbar */
    padding: 14px 16px;
    /* This adds padding around our text */
    text-decoration: none;
    /* This gets rid of the underlines under the text on our navbar */
    font-family: Avant Garde, Helvetica;
    /* This specifies the font family for text on our navbar */
    font-size: 20px;
    /* This specifies the font size for text on our navbar */
    text-align: center;
    /* This centers the text within its container */
    position: relative;
    /* This sets the text relative to its normal positioning, allowing us to use the animation below */
    -webkit-animation: moveNavTextRight 5s;
    /* Animation for Safari 4.0 - 8.0 */
    animation: moveNavTextRight 5s;
    /* Applies the moveNavText animation for 5.75s */
}

/* moveNavText animation effect for moving the navbar text from above the view to the navbar */
@keyframes moveNavTextRight {
    from {
        left: 100%;
    }

    /* This sets the navbar text 100% above the viewport */
    to {
        left: 0%;
    }

    /* This lowers the navbar text onto the navbar */
}


/* Navbar hover effects */
.navbar a:hover {
    background-color: #f4f4f4;
    /* Defines the background color that will display when you hover over the link */
    color: black;
    /* This defines the font color that will display when navbar a elements are hovered over */
    font-weight: bold;
    /* This makes the text on the navbar bold when hovered over */
}

/* Navbar home button */
.Navbar a.active {
    /* This targets the a element on the navbar with the "active" class */
    background-color: darkgray;
}

/***** END OF NAVBAR STYLING *****/