/* I had to declare margin as 0px in order to get rid of the white 
space on the left and right sides of the image*/

body {
    font-family: 'Didact Gothic', sans-serif;
    text-align: center;
    padding-top: 70px;
    margin: 0px;
}

.nav {
    background-color: #f70707;
    color: #f9e5f0;
    font-size: 20px;
    text-align: center;
    padding-top: 5px;
    padding-left: 10px;
    position: fixed;
    top: 0px; 
    left: 0px;
    right: 0px;
    overflow: auto; 
}
/* Used inline block to have the navigation bar options side by side at the top instead of aligning downwards*/
.nav li {
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 10%;
}
.nav ul{
    padding: 0px;
}
.nav a {
    color: black;
    text-decoration: none; 
}
/* Set the width and height at 100% to make the image responsive to the user*/
img {
    width: 100%;
    height: auto;
    margin-top: -30px;
    margin-left: -20px;
    padding-top: 0px;
}
/* "History of Pizza" is white and active on this page */
#active {
    color: #f7f7f7; 
}
/* I chose this background color to match the navigation bar */
footer {
    color: #f9e5f0;
    background-color: #f70707;
}