Mobile fixes

script.js

@@ -60,7 +60,7 @@ const locationData = [
     [2522, 2071, 'images/screenshots/50.png'],
     [1970, 1835, 'images/screenshots/51.png'],
     [2910, 1745, 'images/screenshots/52.png'],
-    // [0, 0, 'images/screenshots/53.png'],
+    [2893, 1634, 'images/screenshots/53.png'],
     // [0, 0, 'images/screenshots/54.png'],
     // [0, 0, 'images/screenshots/55.png'],
     // [0, 0, 'images/screenshots/56.png'],
@@ -199,7 +199,7 @@ function updateGuessPos() {
     }
 }
 
-function toggleFullscreen(){
+function toggleFullscreen() {
     if (mapContainer.classList.contains('fullscreen')) {
         mapContainer.classList.remove('fullscreen');
     } else {
@@ -213,15 +213,18 @@ function addEventListeners() {
     var dragStart = { x: 0, y: 0 }
     var hasMoved = false
 
-    fullscreenButton.addEventListener('click', function(){
+    fullscreenButton.addEventListener('click', function () {
         toggleFullscreen()
     })
 
     document.addEventListener('keypress', function (event) {
         if (event.code === 'Space') {
             guessButtonClicked()
         }
-        if (event.key === 'f'){
+        if (event.key === 'f') {
+            toggleFullscreen()
+        }
+        if(event.key === 'Escape'){
             toggleFullscreen()
         }
     })

style.css

@@ -75,11 +75,13 @@ p {
 
 
 #mapContainer {
+
     background-color: #000000;
     transition: all 0.3s ease-in-out;
     position: absolute;
-    width: 20%;
-    height: 30%;
+    inset: auto 0 1rem auto;
+    width: 30%;
+    height: auto;
     right: 0;
     bottom: 0;
     margin: 1rem;
@@ -96,7 +98,7 @@ p {
 
 #mapContainer:hover {
     width: 50%;
-    height: 70%;
+    height: auto;
 }
 
 #mapCanvas {
@@ -108,7 +110,7 @@ p {
 #buttonContainer {
     display: flex;
     justify-content: space-between;
-    width: 100%;
+    width: 70%;
     padding: 0.5rem;
 }