Update styles.css

styles.css

@@ -1,3 +1,7 @@
+* {
+    box-sizing: border-box;
+}
+
 :root {
     --bg-color: #f0f0f0;
     --text-color: #333;
@@ -19,7 +23,7 @@ body.dark-mode {
 }
 
 body {
-    font-family: Arial, sans-serif;
+    font-family: "Varela Round", sans-serif;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -33,13 +37,12 @@ body {
     direction: rtl;
     color: var(--text-color);
     transition: background-color 0.3s, color 0.3s;
-    padding: 20px;
-    box-sizing: border-box;
+    /* padding: 20px; */
 }
 
 #banner-container {
     width: 100%;
-    max-width: 500px;
+    max-width: 320px;
     display: flex;
     justify-content: center;
     margin-bottom: 20px;
@@ -56,32 +59,30 @@ body {
     background-color: var(--container-bg);
     padding: 20px;
     border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     width: 100%;
-    max-width: 500px;
     position: relative;
     margin: 0 auto;
-    overflow: hidden;
 }
 
 #image-counter {
-    font-size: 16px;
+    font-size: 14px;
     margin-bottom: 10px;
 }
 
 #timer {
-    font-size: 24px;
+    font-size: 20px;
     font-weight: bold;
     margin-bottom: 10px;
     color: var(--button-bg);
 }
 
 #current-image {
     max-width: 100%;
+    max-height: 100%;
     height: auto;
     border-radius: 10px;
     margin-bottom: 20px;
-    max-height: 300px;
     object-fit: contain;
 }
 
@@ -143,8 +144,8 @@ body {
 }
 
 #game-controls button {
-    padding: 10px 15px;
-    font-size: 14px;
+    padding: 8px 12px;
+    font-size: 12px;
     cursor: pointer;
     background-color: var(--button-bg);
     color: white;
@@ -162,11 +163,13 @@ button {
     background-color: var(--button-bg);
     color: white;
     border: none;
-    padding: 10px 20px;
+    padding: 8px 16px;
     font-size: 16px;
     cursor: pointer;
     border-radius: 5px;
     margin: 5px;
+    font-family: "Varela Round", sans-serif;
+
 }
 
 button:hover {
@@ -197,12 +200,15 @@ button:hover {
     margin-top: 0;
 }
 
+.sub-title {
+    font-size: 1.2em;
+}
+
 .rules {
     background-color: var(--bg-color);
     padding: 10px;
     border-radius: 5px;
     margin-top: 20px;
-    font-style: italic;
 }
 
 .bottom-corner-button {
@@ -238,7 +244,7 @@ button:hover {
     width: 100%;
     height: 100%;
     overflow: auto;
-    background-color: rgba(0,0,0,0.4);
+    background-color: rgba(0, 0, 0, 0.4);
 }
 
 .modal-content {
@@ -291,124 +297,107 @@ button:hover {
     cursor: pointer;
 }
 
-.highlight {
-    font-weight: bold;
-    background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    animation: rainbow 6s ease infinite;
-}
 
 @keyframes rainbow {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
 }
 
 h1 {
-    font-size: 2em;
+    font-size: 1.5em;
     margin-bottom: 20px;
 }
 
 .custom-alert {
     display: none;
-    position: absolute;
+    position: fixed;
     z-index: 1000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0,0,0,0.4);
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    background-color: rgba(0, 0, 0, 0.4);
 }
 
 .custom-alert-content {
-    background-color: var(--container-bg);
-    color: var(--text-color);
+    /* background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); */
+    color: white;
+    margin: 15% auto;
     padding: 20px;
-    border: 1px solid var(--button-bg);
+    border: 1px solid #888;
     width: 80%;
-    max-width: 300px;
+    max-width: 400px;
     text-align: center;
-    font-size: 18px;
+    font-size: 24px;
     border-radius: 10px;
-    box-shadow: 0 0 20px rgba(0,0,0,0.5);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
 }
 
 .custom-alert-content p {
-    margin-bottom: 15px;
+    margin-bottom: 20px;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
 }
 
 .custom-alert-content button {
-    background-color: var(--button-bg);
-    color: white;
+    background-color: white;
+    color: #333;
     border: none;
-    padding: 8px 16px;
-    margin-top: 10px;
+    padding: 10px 20px;
+    margin-top: 15px;
     cursor: pointer;
-    font-size: 16px;
+    font-size: 18px;
     border-radius: 5px;
     transition: background-color 0.3s, transform 0.1s;
 }
 
 .custom-alert-content button:hover {
-    background-color: var(--button-hover);
+    background-color: #f0f0f0;
     transform: scale(1.05);
 }
 
-@media (max-width: 540px) {
-    #banner-container,
+
+
+@media (min-width: 540px) {
     #game-container {
-        width: 90%;
+        max-width: 540px;
+        padding: 40px;
     }
-}
 
-@media (max-width: 600px) {
-    #game-container {
-        padding: 10px;
+    #current-image {
+        max-height: 300px;
+
     }
-
+
+
+
     button {
-        font-size: 14px;
-        padding: 8px 16px;
-    }
-
-    .letter-box {
-        width: 25px;
-        height: 25px;
-        font-size: 14px;
+        font-size: 16px;
+        padding: 10px 20px;
     }
 
     h1 {
-        font-size: 1.5em;
+        font-size: 2em;
     }
 
     #timer {
-        font-size: 20px;
+        font-size: 24px;
     }
 
     #image-counter {
-        font-size: 14px;
+        font-size: 16px;
     }
 
     #game-controls button {
-        font-size: 12px;
-        padding: 8px 12px;
-    }
-}
-
-@media (max-width: 400px) {
-    .letter-box {
-        width: 20px;
-        height: 20px;
-        font-size: 12px;
-    }
-
-    #game-controls button {
-        font-size: 11px;
-        padding: 6px 10px;
+        font-size: 14px;
+        padding: 10px 15px;
     }
 }