Adjust structure of page, add background image

index.html

@@ -7,9 +7,9 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <h1>Rock Paper Scissors</h1>
+    <header><h1>Rock Paper Scissors</h1></header>
-
 
+    <main>
         <div class = "buttons">
             <button class = "button" id = "rock">Rock</button>
             <button class = "button" id = "paper">Paper</button>
@@ -25,6 +25,13 @@
         <div class="count">Rounds Played: <span id = "rounds">0</span></div>
 
         <div id = "msg"></div>
+    </main>
+
+    <footer>
+        Created by <a href="https://andrindie.com" target="_blank" rel="noreferrer">Octavia Nichols</a>
+        for <a href="https://www.theodinproject.com/lessons/foundations-rock-paper-scissors" target="_blank" rel="noreferrer">The Odin Project</a>.
+        Check out the code on <a href="https://github.com/Lolabird/odin-rock-paper-scissors" target="_blank" rel="noreferrer">GitHub</a>.
+    </footer>
    
     <script src="script.js"></script>
 </body>

style.css

@@ -1,13 +1,30 @@
 body {
-    background: rgb(221, 125, 104);
+    background-image: url("./images/paper-5985445_1920.jpg");
+    background-size: cover;
+    background-color: rgb(221, 125, 104);
     color: #eee;
     text-align: center;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+header {
+    flex: 0 0 auto;
 }
 
 h1{
     font-size: 50px;
 }
 
+main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
 .buttons {
     display: flex;
     justify-content: center;
@@ -41,3 +58,7 @@ h1{
 #msg .button {
     margin-top: 30px;
 }
+
+footer {
+    flex: 0 0 auto;
+}