+
+
+
Score: 0
+
+
+
diff --git a/dist/style.css b/dist/style.css
index 2bcbe38..be9fb78 100644
--- a/dist/style.css
+++ b/dist/style.css
@@ -1,26 +1,24 @@
body {
display: flex;
flex-direction: column;
- justify-content: center;
align-items: center;
- height: 100vh;
margin: 0;
background-color: #121212;
- overflow: hidden; /* Hide the hand when it's off-screen. */
}
#main-container {
display: flex;
- align-items: flex-start;
+ flex-direction: column;
+ align-items: center;
}
#slap-container {
position: relative;
- margin-right: 20px;
}
#slap-image {
- width: 400px;
+ width: 100%;
+ max-width: 400px;
height: auto;
border: 2px solid #f0f0f0;
border-radius: 10px;
@@ -49,13 +47,16 @@ body {
color: #FFD700; /* Gold. */
font-size: 36px;
text-shadow: 2px 2px 4px #000000;
- text-align: center;
margin-bottom: 20px;
}
+#score-actions {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
#save-score {
- display: block;
- margin: 10px auto 0;
padding: 10px 20px;
border: 2px solid #FFD700;
border-radius: 5px;
@@ -64,6 +65,7 @@ body {
font-size: 18px;
cursor: pointer;
transition: all 0.2s ease-in-out;
+ margin-left: 20px;
}
#save-score:hover {
@@ -76,6 +78,7 @@ body {
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 10px;
+ margin-top: 20px;
}
#modal-overlay {
@@ -146,13 +149,8 @@ body {
}
@media (max-width: 768px) {
- #main-container {
- flex-direction: column;
- align-items: center;
- }
-
#slap-image {
- width: 80vw; /* 80% of the viewport width. */
+ width: 80vw;
}
#leaderboard-container {
@@ -161,12 +159,12 @@ body {
overflow-y: auto;
}
- #save-score {
- padding: 15px 30px;
- font-size: 24px;
- }
-
#score-container {
font-size: 24px;
}
+
+ #save-score {
+ padding: 10px 15px;
+ font-size: 18px;
+ }
}