diff --git a/src/App.css b/src/App.css index 213dd55..ce9c37d 100644 --- a/src/App.css +++ b/src/App.css @@ -25,9 +25,10 @@ align-items: center; justify-content: space-between; width: 100%; - margin-bottom: clamp(5px, 1vh, 15px); + margin-bottom: clamp(3px, 0.5vh, 8px); flex-shrink: 0; - gap: clamp(10px, 2vw, 20px); + gap: clamp(8px, 1.5vw, 15px); + padding: clamp(3px, 0.5vh, 5px) 0; } .app-control-buttons { @@ -37,8 +38,8 @@ } .control-button { - width: clamp(35px, 5vw, 45px); - height: clamp(35px, 5vw, 45px); + width: clamp(30px, 4vw, 40px); + height: clamp(30px, 4vw, 40px); border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); @@ -47,7 +48,7 @@ display: flex; align-items: center; justify-content: center; - font-size: clamp(1.2rem, 2.5vw, 1.5rem); + font-size: clamp(1rem, 2vw, 1.3rem); transition: all 0.3s ease; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); padding: 0; @@ -81,7 +82,7 @@ .app-title { text-align: center; - font-size: clamp(2rem, 5vw, 4rem); + font-size: clamp(1.5rem, 4vw, 3rem); font-weight: bold; text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), @@ -90,6 +91,7 @@ animation: glow 2s ease-in-out infinite alternate; flex: 1; margin: 0; + line-height: 1.2; } @keyframes glow { @@ -115,7 +117,7 @@ .title-to { color: #ff6b6b; - font-size: clamp(1.5rem, 3.5vw, 3rem); + font-size: clamp(1.2rem, 3vw, 2.5rem); } .question-counter-wrapper { @@ -129,10 +131,10 @@ background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 2px solid rgba(255, 215, 0, 0.3); - border-radius: 20px; - padding: clamp(5px, 1vh, 8px) clamp(12px, 2vw, 18px); + border-radius: 15px; + padding: clamp(4px, 0.8vh, 6px) clamp(10px, 1.5vw, 15px); color: #ffd700; - font-size: clamp(0.9rem, 2vw, 1.2rem); + font-size: clamp(0.8rem, 1.8vw, 1rem); font-weight: bold; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); @@ -142,9 +144,9 @@ background: rgba(255, 107, 107, 0.2); color: #ff6b6b; border: 2px solid rgba(255, 107, 107, 0.5); - border-radius: 15px; - padding: clamp(5px, 1vh, 8px) clamp(12px, 2vw, 18px); - font-size: clamp(0.8rem, 1.5vw, 1rem); + border-radius: 12px; + padding: clamp(4px, 0.8vh, 6px) clamp(10px, 1.5vw, 15px); + font-size: clamp(0.75rem, 1.3vw, 0.9rem); font-weight: bold; cursor: pointer; transition: all 0.3s ease; diff --git a/src/components/Game.css b/src/components/Game.css index a766bb2..79e54a8 100644 --- a/src/components/Game.css +++ b/src/components/Game.css @@ -11,6 +11,7 @@ } .game-header { + margin-top: clamp(5px, 1vh, 10px); margin-bottom: clamp(5px, 1vh, 15px); display: flex; flex-direction: column; diff --git a/src/components/Question.css b/src/components/Question.css index 94f5b14..4642100 100644 --- a/src/components/Question.css +++ b/src/components/Question.css @@ -120,7 +120,7 @@ display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(0, 1fr); - gap: clamp(10px, 2vw, 20px); + gap: clamp(6px, 1.2vw, 12px); flex: 1; min-height: 0; overflow: hidden;