diff --git a/static/css/style.css b/static/css/style.css
index 5baf26c..022beaf 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -2,12 +2,17 @@
     --cell-size: 4rem;
     --light-color: white;
     --dark-color: black;
+    --background-radial-percent: 70%;
 }
 
 body {
     background: #141E30;  /* fallback for old browsers */
-    background: -webkit-linear-gradient(to right, black, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(to right, black, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    background: hsla(0, 0%, 0%, 1);
+    background: radial-gradient(circle, hsla(0, 0%, 0%, 1) 0%, hsla(219, 41%, 13%, 1) var(--background-radial-percent));
+    background: -moz-radial-gradient(circle, hsla(0, 0%, 0%, 1) 0%, hsla(219, 41%, 13%, 1) var(--background-radial-percent));
+    background: -webkit-radial-gradient(circle, hsla(0, 0%, 0%, 1) 0%, hsla(219, 41%, 13%, 1) var(--background-radial-percent));
+
+    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#000000", endColorstr="#141E30", GradientType=1 );
 
     display: flex;
     justify-content: center;  /* horizontal centering */
@@ -27,7 +32,7 @@ body {
     background: -webkit-linear-gradient(to right, #3c1053, #ad5389);  /* Chrome 10-25, Safari 5.1-6 */
     background: linear-gradient(to right, #3c1053, #ad5389); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
-    border: .5px solid #bebcbc76; /* subtle outer border */
+    /* border: .5px solid #bebcbc76; subtle outer border */
 }
 
 .token {
@@ -43,6 +48,7 @@ body {
 #player-token {
     background-color: #EE6C4D;
     cursor: grab;
+    touch-action: none;
 }
 
 .cell {
diff --git a/static/js/script.js b/static/js/script.js
index 619fd4c..55f241f 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -52,12 +52,16 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // check for the player grabbing the player icon
     player_token.addEventListener('pointerdown', (e) => {
+        e.preventDefault();
         const rect = player_token.getBoundingClientRect();
         player_token.style.width = `${rect.width}px`;
         player_token.style.height = `${rect.height}px`;
+
+        offsetX = e.pageX - rect.left;
+        offsetY = e.pageY - rect.top;
+
         isDragging = true;
-        offsetX = e.offsetX;
-        offsetY = e.offsetY;
+
         player_token.setPointerCapture(e.pointerId);
     });
 
@@ -119,7 +123,6 @@ document.addEventListener('DOMContentLoaded', () => {
     function resetBoard() {
         inStreak = false;
         tokensRemaining = 5;
-        console.log("resetting board");
         board.querySelectorAll('.token').forEach(token => {
             token.style.display = '';
             token.dataset.captured = 'false'
@@ -151,19 +154,16 @@ document.addEventListener('DOMContentLoaded', () => {
         const {cell: closestCell, distance} = getClosestCellByDistance(e.pageX, e.pageY);
         
         if (distance > MAX_SNAP_DISTANCE) {
-            console.log("TOO FAR AWAY")
             resetToken(player_token.parentElement);
             return;
         }
 
         if (!checkMoveValid(player_token.parentElement, closestCell)) {
-            console.log("INVALID MOVE")
             resetBoard()
             return;
         }
 
         if (!captureCell(closestCell)) {
-            console.log("")
             resetBoard();
             return
         };