/*standard CSS to set the document up*/
	*, *:before, *:after{
    box-sizing: border-box; /*this is to ensure that all elements are using the box model of border-box.  Remember that this model calculates the width of the element as including the borders and padding values, with only the margins being added as additional values.  If you wish to use this method for calculating the amount of space each block element takes up, then you'll need to add this rule, too. NOTE that you can use this to make your math easier, even if you choose to stick with floating instead of Flexbox.*/
    margin-top: 6px;
    border-radius: 6px;
    border-width: 2px;
	}
#mainHomeText h1 {
    color: rgba(242,135,5,1.00);
}

body {
 	margin:0px;

    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    color: #4d1d02;
    font-size: 1em;
    margin-top: auto;
    background-color: rgba(255,248,236,1.00);
    opacity: 1;
}
header {
    padding-bottom: 15px;
    border: 3px solid rgba(191,91,4,1.00);
    background-color: rgba(77,29,2,1.00);
    -webkit-box-shadow: 5px 5px 3px rgba(242,159,5,0.72);
    box-shadow: 5px 5px 3px rgba(242,159,5,0.72);
    border-radius: 5px;
    margin-top: 0px;
}
#topNav ul {
    margin-top: 0px;
    list-style-type: none;
    text-align: center;
    padding-left: 0px;
}
#topNav ul li {
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
    font-size: 1.1rem;
}
a:link, a:visited {
    color: #F9790A;
    text-decoration: none; /*removing the underline for links*/
}
a:hover, a:active {
    color: #FAAA17;
    text-decoration: none; /*removing the underline for links*/
}
#homeImg {
    margin-top: 30px;
    margin-bottom: 30px;
}
#container {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}
main {
    padding-bottom: 50px;
    padding-left: 70px;
    padding-right: 70px;
    padding-top: 30px;
}
#mainHomeText {
    margin-left: 100px;
    margin-right: 100px;
}
header h1 {
    text-align: center;
    font-size: 60px;
}
#buttonNav {
    text-align: center;
    list-style-type: none;
}
.recipeImages {
    width: 250px;
    border: 2px solid rgba(242,135,5,1.00);
    border-radius: 6px;
    padding-top: 23px;
    padding-left: 23px;
    padding-right: 23px;
    padding-bottom: 30px;
}
.recipeLists {
    display: flex;
    justify-content: space-around;
    background-color: rgba(255,241,209,1.00);
    border-radius: 6px;
    border: 2px solid rgba(242,159,5,1.00);
}
.recipeLists .ingredients {
    flex-basis: 40%;
    padding-left: 0px;
    margin-top: 0px;
}
.recipeLists .method {
    flex-basis: 55%;
    padding-left: 0px;
    margin-top: 6px;
}

.centerRecipes {
    margin-right: 35px;
    margin-left: 35px;
}
#buttonNav li {
    display: inline-block;
    font-size: 1.1rem;
    padding-top: 15px;
    margin-left: 60px;
    margin-right: 60px;
    background-color: rgba(141,66,1,1.00);
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
}
footer {
    border: 3px solid rgba(191,91,4,1.00);
    border-radius: 5px;
    background-color: rgba(77,29,2,1.00);
    margin-bottom: 20px;
}
footer h1 {
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
}
footer ul {
    margin-left: 0px;
    padding-left: 0px;
    text-align: center;
    list-style-type: none;
}
footer ul li {
    display: inline-block;
    margin-left: 20px;
    font-size: 0.9rem;
    color: rgba(242,159,5,1.00);
}
#container main #recipeContainer {
    display: flex;
    justify-content: space-between;
}
#recipeContainer .recipeImages h2 {
    display: flex;
    justify-content: center;
}
main:after {
	content:"";
	display:table;
	clear:both;
}
#top {
    border-top-left-radius: 0px 0px;
}
.recipes {
}
.recipeTitle {
    margin-top: 50px;
    padding-top: 5px;
    padding-bottom: 7px;
    padding-left: 0px;
    color: rgba(191,91,4,1.00);
    text-decoration: underline;
}
.recipeImages h2 {
    text-align: center;
}
#recipeText h4 {
    margin-left: 30px;
    color: rgba(242,135,5,1.00);
    margin-top: 10px;
    margin-bottom: 6px;
}
#recipeText li {
    margin-left: 40px;
    color: rgba(102,2,20,1.00);
    margin-top: 0px;
}
#recipeText p {
    padding-top: 10px;
    padding-bottom: 20px;
}
#mainHomeText h2 {
    color: rgba(191,91,4,1.00);
}
main #picturesText {
    margin-top: 300px;
    margin-right: 0px;
    margin-bottom: 300px;
    margin-left: 300px;
}