html {
    background-color: saddlebrown;
}

/*This changes the background color for the entire webpage*/
.topnav {
    display: block;
    margin: auto;
    width: 350px;
}

.topnav a:hover {
    background-color: forestgreen;
    color: black;
}

.topnav a {
    float: none;
    color: burlywood;
    background-color: darkred;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a.active {
    background-color: whitesmoke;
    color: black;
}

/*Everything with .topnav is what changes everything in the navigation bar, from the background color to the hovering color. It also sets where the bar is located and how it is sized.*/

.body {
    font-family: "old goudy style", sans-serif;
    font-size: 16px;
    border-style: hidden;
    padding: 50px 25px 50px 50px;
    background-color: bisque;
    max-width: 500px;
    margin: auto;
}

/*I chose to set the body as a class for all of the html pages because it was easier to get the setting to stick throughout all of the pages. The .body allows for the everything in the body to be stylized the same*/ 

.banner {
    display: block;
    max-width: 500px;
    margin: auto;
}

/*The .banner class allows for me to center the image or banner on the webpage*/

.paragraph {
	margin: auto auto auto auto;
	
}

.menu {
    display: block;
    max-width: 500px;
    margin: auto;
}

/*I did the same for the menu images. I made them into a class so that I can center them on the webpage*/

.copyright {
	font-size: 10px
}

.familyphoto {
    display: block;
    max-width: 500px;
    margin: auto;
}