/* 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;
   	padding-top: 90px;
    float: left;
    text-align: center;
    width: 100%;
    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; 
}

form {
	 width: 20%;
	 vertical-align: top;
	 min-width: 200px;
}
/* Set the width and height at 100% to make the image responsive to the user*/
img {
    width: 100%;
    
}

.slicetomeet {
    width: 60%;

}
/* Used inline block to have the input form section and image side by side*/
.slicetomeet, form {
    display: inline-block;
}
/* "Contact Us" 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;
}

form {
    padding-top: 50px;
}