Add styles

index.html

@@ -9,6 +9,7 @@
     <link href='https://fonts.googleapis.com/css?family=Assistant' rel='stylesheet'>
 </head>
 <body>
+    <main>
         <h1>Odin Recipes</h1>
         <ul class="recipe-menu">
             <li><a href="index.html">Home</a></li>
@@ -34,6 +35,7 @@
                 at a later date to see if anything's changed. See you then!
             </p>
         </div>
+    </main>
 
     <footer>
         Created by <a href="https://andrindie.com" target="_blank" rel="noreferrer">Octavia Nichols</a>

recipes/avocado-toast.html

@@ -9,6 +9,7 @@
     <link href='https://fonts.googleapis.com/css?family=Assistant' rel='stylesheet'>
 </head>
 <body>
+    <main>
         <h1>Odin Recipes</h1>
 
         <ul class="recipe-menu">
@@ -76,6 +77,7 @@
                 fellow "entitled" millenial! I know I'm going to enjoy mine!
             </p>
         </div>
+    </main>
 
     <footer>
         Created by <a href="https://andrindie.com" target="_blank" rel="noreferrer">Octavia Nichols</a>

recipes/greenbean-casserole.html

@@ -9,6 +9,7 @@
     <link href='https://fonts.googleapis.com/css?family=Assistant' rel='stylesheet'> 
 </head>
 <body>
+    <main>
         <h1>Odin Recipes</h1>
 
         <ul class="recipe-menu">
@@ -67,6 +68,7 @@
                 <li>Serve it up on a plate add cheese and enjoy!</li>
             </ol>
         </div>
+    </main>
     
     <footer>
         Created by <a href="https://andrindie.com" target="_blank" rel="noreferrer">Octavia Nichols</a>

recipes/stove-popped-popcorn.html

@@ -9,6 +9,7 @@
     <link href='https://fonts.googleapis.com/css?family=Assistant' rel='stylesheet'>
 </head>
 <body>
+	<main>
 		<h1>Odin Recipes</h1>
 
 		<ul class="recipe-menu">
@@ -62,6 +63,7 @@
 			<li>Add your desired amount of salt and/or seasonings and enjoy!</li>
 			</ol>
 		</div>
+	</main>
 
 	<footer>
         Created by <a href="https://andrindie.com" target="_blank" rel="noreferrer">Octavia Nichols</a>

style.css

@@ -3,33 +3,55 @@ html {
 }
 
 body{
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
     max-width: 66%;
     margin: 0 auto;
     padding: 10px 85px;
     min-height: 100vh;
     background-color: rgb(220, 248, 220, .85);
+    flex: 1
 }
 
 img {
     width:100%;
     height: auto;
 }
+.recipe-menu{
+    padding: 0;
+    border: 5px solid green;
+    text-align: center;
+    list-style-type: none;
+    margin: auto;
+    background-color: rgba(224, 205, 191, 0.5);
+}
 
-a{
+.recipe-menu li{
-   text-decoration: none; 
+    margin: 8px;
-   color: green;
+    display: inline-block;
+    font-size: 20px;
 }
 
 .recipe-menu a {
+    text-decoration: none; 
     font-weight: bold;
+    color: green;
+}
+
+.recipe-menu a:hover, .recipe-menu a:focus {
+    color: #39291c;
+    text-decoration: underline;
 }
 
 h1, h2, h3, h4, h5, h6, .recipe-menu {
     font-family: 'Alegreya Sans SC', sans-serif;
+    color: #39291c;
 }
-/* h3, h4, h5, h6 {
+
-    color: green;
-} */
 h1 {
     font-size: 50px;
 }
@@ -40,21 +62,28 @@ h3{
     font-size: 30px;
 }
 
-.recipe-menu{
-    padding: 0;
-    border: 5px solid green;
-    text-align: center;
-    list-style-type: none;
-    margin: auto;
-}
-
-.recipe-menu li{
-    margin: 8px;
-    display: inline-block;
-    font-size: 20px;
-}
-
 .content{
     font-family: 'Assistant', sans-serif;
     font-size: 20px;
 }
+
+footer {
+    color: #eee;
+    text-align: center;
+    position: relative;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(17, 17, 17, 0.85);
+    flex: 0 0 auto;
+    margin: 0;
+    width: 100%;
+    padding: 10px 0;
+}
+
+footer a {
+    color: #e0cdbf;
+}
+
+footer a:hover, footer a:focus {
+    text-decoration: none;
+}