Adjust structure of page, add background image

index.html

@@ -7,24 +7,31 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <h1>Rock Paper Scissors</h1>
+    <header><h1>Rock Paper Scissors</h1></header>
 
-    
-    <div class = "buttons">
-        <button class = "button" id = "rock">Rock</button>
-        <button class = "button" id = "paper">Paper</button>
-        <button class = "button" id = "scissors">Scissors</button>
-    </div>
+    <main>
+        <div class = "buttons">
+            <button class = "button" id = "rock">Rock</button>
+            <button class = "button" id = "paper">Paper</button>
+            <button class = "button" id = "scissors">Scissors</button>
+        </div>
 
 
-    <div class = "score">
-        <div class = "score-text"> You: <span id = "player">0</span></div>
-        <div class = "score-text">Compy: <span id = "computer">0</span></div>
-    </div>
+        <div class = "score">
+            <div class = "score-text"> You: <span id = "player">0</span></div>
+            <div class = "score-text">Compy: <span id = "computer">0</span></div>
+        </div>
 
-    <div class="count">Rounds Played: <span id = "rounds">0</span></div>
+        <div class="count">Rounds Played: <span id = "rounds">0</span></div>
 
-    <div id = "msg"></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;
@@ -40,4 +57,8 @@ h1{
 
 #msg .button {
     margin-top: 30px;
+}
+
+footer {
+    flex: 0 0 auto;
 }