Add classes and styles; fix working in player win case

index.html

@@ -11,15 +11,15 @@
 
     
     <div class = "buttons">
-        <button id = "rock">Rock</button>
-        <button id = "paper">Paper</button>
-        <button id = "scissors">Scissors</button>
+        <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> You: <span id = "player">0</span></div>
-        <div>Compy: <span id = "computer">0</span></div>
+        <div class = "score-text"> You: <span id = "player">0</span></div>
+        <div class = "score-text">Compy: <span id = "computer">0</span></div>
     </div>
 
     <div id = "msg"></div>

script.js

@@ -73,7 +73,7 @@ function game() {
             case "player wins":
                 pScore += 1;
                 player.textContent = pScore;
-                msg.textContent = "You lose! " + ps + " beats " + cs;
+                msg.textContent = "You win! " + ps + " beats " + cs;
                 break;
             default:
                 msg.textContent = "It's a tie!";

style.css

@@ -0,0 +1,34 @@
+*{
+    outline: 2px, solid, yellow;
+}
+
+body {
+    background: rgb(99, 80, 99);
+    color: #eee;
+    text-align: center;
+}
+
+.buttons {
+    display: flex;
+    justify-content: center;
+}
+
+.button {
+    width: 200px;
+    margin: 5px;
+    font-size: 30px;
+}
+
+.score {
+    display: flex;
+    justify-content: center;
+}
+
+.score-text {
+    margin: 5px;
+    font-size: 25px;
+}
+
+#msg {
+    font-size: 20px;
+}