styling'

index.html

@@ -31,6 +31,8 @@ <h1 id='players-turn'></h1>
         <div id='board'></div>
     </div>
     <div class='total'>
+        <h1 class='scoreboard'> SCOREBOARD</h1>
+        <div class='players'>
         <div class='player1'>
             <h1>Player 1</h1>
             <div class='wins'>
@@ -44,6 +46,7 @@ <h3>Wins: <span class='p2w'>0</span></h3>
             </div>
         </div>
     </div>
+    </div>
 </div>
 </div>
 <footer>

main.js

@@ -95,7 +95,8 @@ function mouseOut(event){
 function determineWinner(winningRow){
     for(i=0; i<winningRow.length; i++){
         // document.getElementById(winningRow[i]).style.backgroundBlendMode='luminosity';
-        document.getElementById(winningRow[i]).style.boxShadow='inset 0 0 0 2000px rgba(225,225,225, 0.6)';
+        // document.getElementById(winningRow[i]).style.boxShadow='inset 0 0 0 2000px rgba(225,225,225, 0.6)';
+        document.getElementById(winningRow[i]).style.filter='hue-rotate(220deg)';
 
     }
     if(player ===1){
@@ -267,7 +268,8 @@ function resetBoard(){
  let allPlay = document.getElementsByClassName('box')
  for (var i = 0; i < allPlay.length; i++) {
     allPlay[i].classList.remove('yellow')
-    allPlay[i].style.boxShadow = null;
+    // allPlay[i].style.boxShadow = null;
+    allPlay[i].style.filter=null;
     allPlay[i].classList.remove('red')
   }
   document.getElementById('clicker').addEventListener('click', clickEvent)

styles.scss

@@ -2,17 +2,25 @@
 body{
     margin: unset;
     font-family: $body-font;
+    background-image: url("image/background.jpeg");
+        background-repeat: repeat-x;
+        background-position: center;
+        background-size: contain;
 
     h1{
         margin: unset;
         font-size: 2vw;
+        color: $white;
+        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
         @include bp-small{
             font-size: 5vw;
         }
     }
     h3{
         margin: unset;
         font-size: 1.5vw;
+        color: $white;
+        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
         @include bp-small{
             font-size: 3.5vw;
         }
@@ -23,19 +31,17 @@ body{
         font-weight: 700;
     }
     nav{
-        background-color: $white;
+        background: rgba(255, 255, 255, 0.7);
+        padding: 20px 0;
         display: grid;
         grid-template-columns: .3fr 1fr .3fr;
         justify-items: center;
         align-items: center;
-        padding-top: 3px;
         .title{
             grid-column: 2/3;
             h1{
-                background: rgb(238,59,51);
-background: radial-gradient(circle, rgba(238,59,51,1) 0%, rgba(255,222,0,1) 100%);
-                 -webkit-background-clip: text;
-                 -webkit-text-fill-color: transparent;
+               color: $blue;
+               text-shadow: unset;
             }
         }
         .nav-bar{
@@ -56,10 +62,7 @@ background: radial-gradient(circle, rgba(238,59,51,1) 0%, rgba(255,222,0,1) 100%
 
     }
     #main{
-        background-image: url("image/background.jpeg");
-        background-repeat: repeat-x;
-        background-position: center;
-        background-size: contain;
+
     }
     .header{
         display: flex;
@@ -72,6 +75,7 @@ background: radial-gradient(circle, rgba(238,59,51,1) 0%, rgba(255,222,0,1) 100%
         }
     }
     .turn{
+        place-self: center;
         button{
             font-family: $body-font;
             font-size: 1vw;
@@ -81,11 +85,13 @@ background: radial-gradient(circle, rgba(238,59,51,1) 0%, rgba(255,222,0,1) 100%
         }
     }
     .board{
+        padding-bottom: 40px;
         @include bp-small{
             grid-row-start: 1;
             grid-row-end: 2;
             grid-column-start: 1;
             grid-column-end: 3;
+
         }
     }
     .main{
@@ -160,6 +166,14 @@ background: radial-gradient(circle, rgba(238,59,51,1) 0%, rgba(255,222,0,1) 100%
           }
 
     }
+    .total{
+        place-self: center;
+        display: flex;
+        flex-direction:column;
+        .scoreboard{
+            padding-bottom: 30px;
+        }
+    }
     #reset{
         cursor: pointer;
     }

variables.scss

@@ -17,9 +17,11 @@ $transition_duration: .5s;
 //Fonts
 @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;600;700;900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Nunito:wght@300;600;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@100;300;500;700;900&family=Montserrat:wght@300;400;500;600;700&family=Nunito:wght@300;600;700;900&display=swap');
 // $header-font: 'Helvetica', sans-serif;
 // $body-font: 'Nunito', sans-serif;
-$body-font: 'Montserrat', sans-serif;
+// $body-font: 'Montserrat', sans-serif;
+$body-font: 'Montserrat Alternates', sans-serif;
 
 @mixin bp-x-large {
     @media only screen and (max-width: $size-x-large) {